/* Clone do Reservame, grupo vendas (vender, reservas, reserva, venda, vendas): estilos só
   destas telas. Cores, fontes, raios e toque vêm dos tokens do :root do estilo.css; os
   pedaços comuns (.rm-tabela, .rm-kpis, .rm-ficha, .rm-form-2, .rm-filtros) do estilo-rm.css. */

/* Linha de ações da ficha (editar, confirmar, cancelar...): botões lado a lado, quebram no celular. */
.rm-vendas .rm-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-vendas .rm-acoes form, .rm-vendas .cabeca-acoes form { display: contents; }

/* Formulário em duas colunas: cada campo com respiro embaixo (o .rm-form-2 não tem gap de linha). */
.rm-vendas .rm-form-2 .campo { margin-bottom: 16px; }
.rm-vendas .formulario .subtitulo { margin-top: 8px; }

/* Bloco de um tour (ou de um passageiro) dentro do formulário: borda da marca, campos em grade. */
.rm-vendas .rm-bloco { display: grid; gap: 12px; }
.rm-vendas .rm-linha-tour { min-width: 0; margin: 0; padding: 8px 16px 0; border: 1px solid var(--borda); border-radius: var(--r-md); background: var(--campo); }
.rm-vendas .rm-linha-tour legend { padding: 0 6px; font-weight: 700; }
.rm-vendas .rm-linha-tour-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.rm-vendas .rm-linha-tour-campos .campo { margin-bottom: 14px; }
.rm-vendas .rm-linha-tour-campos .campo-largo { grid-column: 1 / -1; }

/* "Mais tours (3 a 8)": fechado por padrão, abre sem JavaScript. */
.rm-vendas .rm-mais-tours > summary { display: flex; align-items: center; min-height: var(--toque); font-weight: 700; cursor: pointer; }
.rm-vendas .rm-mais-tours[open] > summary { margin-bottom: 12px; }

/* Caixa de marcar com área de toque de 44 px. */
.rm-vendas .rm-check { display: flex; align-items: center; gap: 10px; min-height: var(--toque); font-weight: 600; }
.rm-vendas .rm-check input { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; flex-shrink: 0; }

/* Telefone com Ligar e WhatsApp na ficha. */
.rm-vendas .rm-contato { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-vendas .rm-ficha dd { overflow-wrap: anywhere; }

/* Reserva cancelada: o título fica riscado, a ficha continua legível. */
.rm-reserva-cancelada .rm-ficha { color: var(--texto-suave); }

/* Botões do painel de filtros numa linha só, lado a lado. */
.rm-vendas .rm-filtros .rm-filtros-acoes { grid-column: 1 / -1; }

/* No computador e no tablet a lista tem até 21 colunas: cada célula fica numa linha e a
   tabela rola para o lado dentro do cartão, em vez de quebrar palavra por palavra. */
@media (min-width: 768px) {
  .rm-vendas .rm-tabela th, .rm-vendas .rm-tabela td { white-space: nowrap; }
}

/* No celular, a linha de totais vira um cartão no fim da lista (o estilo-rm esconde o tfoot). */
@media (max-width: 767px) {
  .rm-vendas .rm-tabela.rm-cartoes tfoot { display: block; }
  .rm-vendas .rm-tabela.rm-cartoes tfoot tr { display: block; background: var(--fundo); border: 1px solid var(--borda-forte); }
  .rm-vendas .rm-tabela.rm-cartoes tfoot td { display: flex; font-weight: 700; }
  .rm-vendas .rm-tabela.rm-cartoes td.rm-vazia { display: none; }
  .rm-vendas .rm-filtros-acoes .botao { flex: 1; }
}

/* Voucher no papel: só a ficha, as reservas, os pagamentos e os passageiros. Sem menu,
   sem barra, sem botão, sem faixa de teste; fundo e cartões em branco para a impressora. */
@media print {
  .barra-topo, .menu, .menu-fundo, .faixa-teste, .aviso, .botao, .rm-acoes, .rm-nao-imprimir, .voltar, .rm-filtros, .rm-paginacao { display: none !important; }
  .moldura { display: block; min-height: 0; }
  .moldura .tela, .tela { max-width: none; margin: 0; padding: 0; gap: 12px; }
  body, .rm-tabela, .rm-ficha, .rm-kpi, .rm-tabela th, .rm-tabela tfoot td { background: var(--campo); box-shadow: none; }
  .rm-tabela, .rm-ficha, .rm-kpi { border-color: var(--borda-forte); border-radius: 0; }
  .rm-tabela { font-size: 12px; }
  .rm-tabela th, .rm-tabela td { padding: 4px 6px; }
  .rm-tabela-rolagem { overflow: visible; }
  .rm-ficha, .rm-tabela, .rm-kpis { break-inside: avoid; }
  .rm-status { border: 1px solid var(--borda-forte); }
  a { color: inherit; text-decoration: none; }
}