/* ============================================================
   Melhor Passagem · Agency OS — Formulários e Modais (Fase 6)
   ------------------------------------------------------------
   Evolui a tela "Registrar bilhete" (#pg-registrar) e os modais
   (.modal-box) para a linguagem ds. SÓ CSS, escopado e sob
   .ds-theme: preserva TODAS as funções — nenhum id, handler,
   layout (grid) ou cálculo é tocado, só a aparência.

   Reversão total: remover a classe ds-theme (ou este <link>).
   Zero hex fora de ds-tokens.css (exceto !important pontual p/
   sobrescrever 2 caixas de aviso com estilo inline legado).
   ============================================================ */

/* realinha variáveis legadas usadas em estilos inline do JS/HTML
   (contador de CPFs, texto de aviso, lucro +/-) à paleta ds */
.ds-theme #pg-registrar {
  --sub: var(--ds-texto-meta);
  --alerta: var(--ds-alerta-texto);
  --ok: var(--ds-kpi-positivo);
  --erro: var(--ds-kpi-negativo);
}

/* ── passos viram cards do form ── */
.ds-theme #pg-registrar .passo {
  background: var(--ds-branco); border: 1px solid var(--ds-n-200);
  border-radius: var(--ds-raio-modal); padding: var(--ds-esp-24) var(--ds-esp-24) var(--ds-esp-24) 62px;
}
.ds-theme #pg-registrar .passo h3 {
  font-family: var(--ds-fonte); font-size: var(--ds-tam-secao); font-weight: var(--ds-peso-secao);
  color: var(--ds-titulo); letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-registrar .passo h3 em {
  left: var(--ds-esp-20); top: var(--ds-esp-20); width: 30px; height: 30px;
  border-radius: var(--ds-esp-8); background: var(--ds-grad-marca); color: var(--ds-branco);
}
.ds-theme #pg-registrar .passo .dica,
.ds-theme #pg-registrar p.dica {
  color: var(--ds-texto-meta); font-family: var(--ds-fonte); font-size: var(--ds-tam-sec);
  letter-spacing: var(--ds-espaco-letras);
}

/* ── labels e campos (compartilha com os modais mais abaixo) ── */
.ds-theme #pg-registrar 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: var(--ds-esp-10) 0 var(--ds-esp-6);
}
.ds-theme #pg-registrar .campo-grupo h4 {
  font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); font-weight: 500;
  color: var(--ds-brand-800); letter-spacing: .08em; text-transform: uppercase;
}

.ds-theme #pg-registrar input:not([type=file]):not([type=checkbox]):not([type=radio]),
.ds-theme #pg-registrar select,
.ds-theme #pg-registrar textarea,
.ds-theme .modal-box input:not([type=checkbox]):not([type=radio]),
.ds-theme .modal-box select,
.ds-theme .modal-box textarea {
  height: 46px; border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-input);
  padding: 0 14px; background: var(--ds-branco); box-shadow: none;
  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 #pg-registrar textarea, .ds-theme .modal-box textarea {
  height: auto; min-height: 88px; padding: var(--ds-esp-12) 14px; resize: vertical;
}
.ds-theme #pg-registrar select,
.ds-theme .modal-box select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--ds-branco) var(--ds-icone-chevron) no-repeat right 12px center;
  background-size: 16px 16px; padding-right: 38px;
}
.ds-theme #pg-registrar input:focus,
.ds-theme #pg-registrar select:focus,
.ds-theme #pg-registrar textarea:focus,
.ds-theme .modal-box input:focus,
.ds-theme .modal-box select:focus,
.ds-theme .modal-box textarea:focus {
  outline: none; border-color: var(--ds-foco); box-shadow: 0 0 0 2px var(--ds-brand-200);
}
.ds-theme #pg-registrar input::placeholder,
.ds-theme .modal-box input::placeholder { color: var(--ds-texto-meta); font-weight: 400; }
/* campo travado/desabilitado = cinza com valor visível */
.ds-theme #pg-registrar input:disabled,
.ds-theme #pg-registrar .campo-inativo input { background: var(--ds-n-100); color: var(--ds-texto-sec); }

/* upload de arquivo como "drop zone" */
.ds-theme #pg-registrar input[type=file] {
  border: 1.5px dashed var(--ds-brand-300); border-radius: var(--ds-raio-input);
  background: var(--ds-brand-25); padding: var(--ds-esp-16); width: 100%; height: auto;
  color: var(--ds-texto-sec); cursor: pointer;
}

/* leitura do bilhete (sucesso / erro) */
.ds-theme #pg-registrar #leitura {
  background: var(--ds-ok-fundo); border: 1px solid var(--ds-ok-icone); color: var(--ds-ok-texto);
  border-radius: var(--ds-raio-input);
}
.ds-theme #pg-registrar #leitura.erro {
  background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone); color: var(--ds-alerta-texto);
}

/* ── toggle estoque / balcão ── */
.ds-theme #pg-registrar .source-option {
  border: 1px solid var(--ds-n-300); background: var(--ds-branco); border-radius: var(--ds-raio-botao);
  padding: var(--ds-esp-16); color: var(--ds-texto-forte);
}
.ds-theme #pg-registrar .source-option b { color: var(--ds-texto-forte); font-weight: 500; }
.ds-theme #pg-registrar .source-option span { color: var(--ds-texto-meta); }
.ds-theme #pg-registrar .source-option.ativo {
  border-color: var(--ds-brand-600); background: var(--ds-brand-50); box-shadow: none;
}

/* ── nota de campo (dica embutida) ── */
.ds-theme #pg-registrar .nota-campo {
  background: var(--ds-brand-50); border: 1px solid var(--ds-brand-200); border-radius: var(--ds-raio-input);
  color: var(--ds-texto-sec); font-size: 13px; letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-registrar .nota-campo b { color: var(--ds-brand-800); }

/* ── caixas de aviso (têm estilo inline dark legado → !important) ── */
.ds-theme #pg-registrar #em-saldo-aviso,
.ds-theme #pg-registrar #em-custo-aviso {
  background: var(--ds-alerta-fundo) !important; border-color: var(--ds-alerta-fundo) !important;
  color: var(--ds-alerta-texto) !important; border-radius: var(--ds-raio-input) !important;
}

/* ── painel de cálculo ao vivo (destaque) ── */
.ds-theme #pg-registrar .calculo { gap: var(--ds-esp-12); margin-top: var(--ds-esp-16); }
.ds-theme #pg-registrar .calculo div {
  background: var(--ds-kpi-fundo); border: 1px solid var(--ds-brand-300);
  border-radius: var(--ds-raio-kpi); padding: var(--ds-esp-16);
}
.ds-theme #pg-registrar .calculo span {
  color: var(--ds-texto-sec); font-size: 12px; letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-registrar .calculo b {
  color: var(--ds-texto-forte); font-size: 20px; font-weight: var(--ds-peso-kpi);
  font-variant-numeric: tabular-nums; margin-top: var(--ds-esp-4);
}
.ds-theme #pg-registrar .calculo .positivo b { color: var(--ds-kpi-positivo); }
.ds-theme #pg-registrar .calculo .negativo b { color: var(--ds-kpi-negativo); }

/* ── botão salvar ── */
.ds-theme #pg-registrar .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 #pg-registrar .acao:hover { background: var(--ds-grad-marca-hover); }

/* foco acessível */
.ds-theme #pg-registrar input:focus-visible,
.ds-theme #pg-registrar select:focus-visible,
.ds-theme #pg-registrar textarea:focus-visible,
.ds-theme #pg-registrar .source-option:focus-visible,
.ds-theme #pg-registrar .acao:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }

/* ============================================================
   MODAIS (.modal-overlay / .modal-box) — template 5
   ============================================================ */
.ds-theme .modal-overlay { background: rgba(21, 29, 86, .35); }
.ds-theme .modal-box {
  background: var(--ds-branco); border: 0; border-radius: var(--ds-raio-modal);
  padding: var(--ds-esp-32); box-shadow: var(--ds-sombra-modal);
  color: var(--ds-texto); letter-spacing: var(--ds-espaco-letras);
}
.ds-theme .modal-box h3 {
  font-family: var(--ds-fonte); font-size: var(--ds-tam-secao); font-weight: var(--ds-peso-secao);
  color: var(--ds-titulo); letter-spacing: var(--ds-espaco-letras);
}
.ds-theme .modal-box .dica { color: var(--ds-texto-meta); font-size: var(--ds-tam-sec); }
.ds-theme .modal-box 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: var(--ds-esp-10) 0 var(--ds-esp-6);
}
.ds-theme .modal-box .rodape {
  display: flex; gap: var(--ds-esp-10); justify-content: flex-end; align-items: center;
  margin-top: var(--ds-esp-20);
}
.ds-theme .modal-box .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: 46px; padding: 12px 20px;
  font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); box-shadow: none;
}
.ds-theme .modal-box .acao:hover { background: var(--ds-grad-marca-hover); }
.ds-theme .modal-box .leve {
  background: var(--ds-branco); border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-input);
  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); padding: 10px 16px; cursor: pointer;
}
.ds-theme .modal-box .leve:hover { background: var(--ds-n-50); color: var(--ds-brand-700); }
.ds-theme .modal-box input:focus-visible,
.ds-theme .modal-box select:focus-visible,
.ds-theme .modal-box .acao:focus-visible,
.ds-theme .modal-box .leve:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }

/* ── Hospedagem: campo único de valor de venda ───────────────
   O input mora dentro de .hp-venda-caixa junto do "R$" e do
   alternador total|por diária, então quem desenha a borda e o
   anel de foco é a CAIXA. As regras genéricas de #pg-registrar
   acima têm 3 :not() e venciam qualquer seletor de classe: por
   isso a exceção repete o mesmo seletor com .hp-venda-caixa a
   mais. Nada fora dessa caixa é afetado.
   ============================================================ */
.ds-theme #pg-registrar .hp-venda-caixa { min-height: 46px; }
.ds-theme #pg-registrar .hp-venda-caixa input:not([type=file]):not([type=checkbox]):not([type=radio]) {
  height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.ds-theme #pg-registrar .hp-venda-caixa input:focus {
  outline: none; border: 0; box-shadow: none;
}