/* ==========================================================================
   PÁGINA DE CONTRIBUIÇÃO
   Destino do QR Code projetado no telão: quem chega aqui está de pé, com o
   celular na mão e pouco tempo. Por isso o dado vem sempre acima do botão que
   o copia, com alvo de toque grande.
   Depende de pagina.css, carregado antes.
   ========================================================================== */

/* --- Blocos de conta ------------------------------------------------------ */

.praca { margin-top: var(--e-12); }

.praca__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--texto-t3);
  margin-bottom: var(--e-4);
}

.dados {
  display: grid;
  gap: var(--e-3);
}

.dado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-4) var(--e-4) var(--e-6);
  background: var(--cor-tinta-alta);
  border-radius: var(--raio-medio);
}

.dado__corpo { min-width: 0; }

.dado__rotulo {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-apoio-claro);
}

.dado__valor {
  margin-top: var(--e-1);
  font-size: var(--texto-p);
  line-height: 1.35;
  /* IBAN e e-mail são longos e não podem empurrar o botão para fora da tela. */
  overflow-wrap: anywhere;
}

.dado__valor--codigo {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* --- Botão de copiar ------------------------------------------------------
   Alvo de 44px, que é o dedo médio de um adulto. O rótulo troca para
   "Copiado" e volta sozinho.
--------------------------------------------------------------------------- */

.copiar {
  flex-shrink: 0;
  min-height: 2.75rem;
  padding-inline: var(--e-6);
  background: var(--cor-laranja);
  color: var(--cor-tinta);
  border: 1px solid var(--cor-laranja);
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--t-micro) var(--curva-saida),
    color var(--t-micro) var(--curva-saida),
    transform var(--t-micro) var(--curva-saida);
}

.copiar:hover { background: var(--cor-laranja-quente); }

.copiar:active { transform: scale(0.97); }

.copiar.esta-copiado {
  background: transparent;
  color: var(--cor-laranja);
}

/* --- Aviso de cópia -------------------------------------------------------
   Aparece por instantes na base da tela, sem cobrir o dado copiado.
--------------------------------------------------------------------------- */

.aviso {
  position: fixed;
  left: 50%;
  bottom: var(--e-6);
  z-index: 20;
  padding: var(--e-3) var(--e-6);
  background: var(--cor-papel);
  color: var(--cor-tinta);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition:
    opacity var(--t-curta) var(--curva-saida),
    transform var(--t-curta) var(--curva-saida);
}

.aviso.esta-visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 48rem) {
  .dado { padding-inline: var(--e-6); }
}

@media (max-width: 24rem) {

  /* Em tela muito estreita o botão desce para baixo do valor em vez de
     espremer os dois lado a lado. */
  .dado {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-3);
    padding-inline: var(--e-4);
  }

  .copiar { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {

  .copiar,
  .aviso {
    transition-duration: 1ms;
  }

  .copiar:active { transform: none; }
}