/* Peças comuns às telas da frente D (plano, pagamento, enriquecer, clientes e saídas, entrada).
 * 1. (A faixa de uso do topo é uma só, no painel.css: templates/faixa_uso.html.)
 * 2. "Parar tudo": botão de borda sólida âmbar com ícone (antes, tracejado: parecia área de soltar).
 * 3. Aceite antes de pagar/registrar: o botão fica com a cor dele a 55% e cursor "não"; clicou sem
 *    marcar, a caixa do aceite ganha um contorno âmbar calmo (uma vez, sem piscar). telas/aceite.js.
 */

/* ---------- 2. parar tudo ---------- */
.faixa > details.perigo { margin-left: auto; }
details.perigo > summary { border: 1px solid var(--amber); color: var(--amber-ink); background: var(--surface);
  font-weight: 600; font-size: 0.84rem; padding: 8px 14px 8px 11px; min-height: 38px; }
details.perigo > summary:hover { background: var(--amber-soft); }
details.perigo[open] > summary { color: var(--amber-ink); border-color: var(--amber); background: var(--amber-soft); }
details.perigo > summary .ic { color: var(--amber-ink); }
details.perigo .balao { left: auto; right: 0; }

/* ---------- 3. aceite antes da ação ---------- */
form[data-espera="1"] [data-aceite-botao] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
form[data-espera="1"] [data-aceite-botao]:hover { transform: none; box-shadow: none; }
label.marcar { transition: box-shadow .3s ease, background-color .3s ease; }
label.marcar.chamando { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 75%, transparent);
  background-color: var(--amber-soft); border-radius: 6px; }

/* ---------- celular: "parar tudo" e os avisos da faixa ---------- */
@media (max-width: 860px) {
  .faixa { flex-wrap: wrap; gap: 10px; }
  .faixa > details.perigo { order: 1; flex: none; margin-left: 0; }
  details.perigo > summary { min-height: 44px; padding: 5px 12px 5px 10px; font-size: 0.8rem; gap: 4px; }
  details.perigo > summary .ic { width: 14px; height: 14px; }
  .faixa > .alerta, .faixa > .andando { order: 2; flex-basis: 100%; }
}
/* o botão à espera troca a seta por um cadeado: travado de propósito, não quebrado */
[data-aceite-botao] .so-espera { display: none; }
form[data-espera="1"] [data-aceite-botao] .so-espera { display: inline-block; }
form[data-espera="1"] [data-aceite-botao] .sem-espera { display: none; }