/* Barra "Sua ficha" no celular, painel que sobe de baixo e o modal de confirmação. */

.barra-ficha .mini-folha { display: grid; place-items: center; color: var(--grafite); }
.barra-ficha .mini-folha svg { width: 1.375rem; height: 1.375rem; }
.barra-ficha .barra-seta { display: grid; place-items: center; color: var(--grafite-claro); margin-left: -.25rem; }
.barra-ficha .barra-seta svg { width: 1.125rem; height: 1.125rem; transform: rotate(180deg); }
.barra-ficha.pulsa { animation: barra-pulsa 520ms var(--mola); }
@keyframes barra-pulsa { 40% { transform: translateX(-50%) scale(1.06); } }
.barra-ficha:active { transform: translateX(-50%) scale(.97); }

.painel-ficha {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 90dvh;
  margin: 0;
  padding: 0 var(--margem) calc(var(--e5) + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  overflow-y: auto;
  background: var(--papel);
  color: var(--grafite);
}
.painel-ficha::backdrop { background: rgba(42, 39, 36, .5); }
.painel-ficha[open] { animation: painel-sobe 460ms var(--ease) both; }
.painel-ficha[open]::backdrop { animation: fade-entra 300ms both; }
.painel-ficha.saindo { animation: painel-desce 220ms cubic-bezier(.4, 0, 1, 1) both; }
.painel-ficha.saindo::backdrop { animation: fade-sai 220ms both; }
@keyframes painel-sobe { from { transform: translateY(100%); } }
@keyframes painel-desce { to { transform: translateY(100%); } }

.painel-topo { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 3.25rem; }
.painel-puxador {
  position: absolute;
  top: .625rem;
  left: 50%;
  width: 2.5rem;
  height: .25rem;
  margin-left: -1.25rem;
  border-radius: 1rem;
  background: var(--creme);
}
.painel-ficha .folha { margin-top: var(--e2); }
.painel-rodape { display: flex; justify-content: center; margin-top: var(--e5); }

@media (min-width: 67.5em) { .painel-ficha { display: none !important; } }

/* Modal de confirmação: painel escuro, só pra isto e pro bloco de prompt */
.modal {
  width: min(calc(100% - 2.5rem), 26rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-m);
  background: var(--escuro);
  color: var(--papel);
  box-shadow: 0 28px 70px -24px rgba(0, 0, 0, .7);
}
.modal::backdrop { background: rgba(42, 39, 36, .6); }
.modal[open] { animation: modal-entra 360ms var(--ease) both; }
.modal[open]::backdrop { animation: fade-entra 280ms both; }
.modal.saindo { animation: modal-sai 180ms cubic-bezier(.4, 0, 1, 1) both; }
.modal.saindo::backdrop { animation: fade-sai 180ms both; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes modal-sai { to { opacity: 0; transform: translateY(8px) scale(.98); } }

.modal-corpo { display: grid; gap: var(--e4); padding: var(--e6) var(--e5) var(--e5); }
.modal-titulo { color: var(--papel); font-size: 1.875rem; }
.modal-texto { color: rgba(253, 251, 250, .84); }
.modal-acoes { display: grid; gap: var(--e2); justify-items: start; margin-top: var(--e2); }
.modal-acoes .btn { width: 100%; }
.modal .btn-texto { color: var(--papel); }
.modal :focus-visible { outline-color: var(--papel); }
.modal .btn:focus-visible { outline-color: var(--papel); }