/* O :root e as pecas de base do painel do Payflow, mais a roda de espera.

   Chamava-se "a casca das paginas de entrada", e era: a entrada e o recuperar
   viviam aqui. Passaram para o desenho novo (entrar.css, PLANO.md parte 4) e
   sairam daqui. Fica o que o painel ainda le -- as cores do :root, o .btn, a
   .nota e o .erro -- ate o painel passar tambem, na parte 5. */

:root{
  --bg:#F3F3F1; --card:#FFFFFF; --card-2:#FAFAF9;
  --ink:#0A0A0A; --muted:#6A6A66; --muted-2:#91918C;
  --line:#E5E5E1; --line-2:#EFEFEC; --cruz:#C9C9C3;
  --accent:#7F3AED; --accent-hi:#6D28D9; --accent-soft:#F2EBFD;
  --ok:#1F8A5B; --ok-soft:#E4F2EB;
  --amber:#B87A0A; --amber-soft:#FBF0DC;
  --red:#D23A2E; --red-soft:#FAE7E5;
  --sans:"Google Sans",-apple-system,"Segoe UI",sans-serif;
  --num:"Space Grotesk",ui-monospace,monospace;
  --r:12px; --r-s:8px;
  --s1:8px; --s2:14px; --s3:22px; --s4:32px;
}

/* O atributo hidden do navegador vale display:none, mas perde para qualquer
   regra de display do autor -- e foi assim que tres formularios apareceram
   empilhados no mesmo ecra. Esta regra fecha essa porta de vez. */
[hidden]{display:none !important}

*{box-sizing:border-box}
body{margin:0; background:var(--card); color:var(--ink);
  font-family:var(--sans); font-optical-sizing:auto; font-variation-settings:"GRAD" 0;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}

/* O logo da aplicacao. O ficheiro ja traz o roxo, o "F" e os cantos
   redondos: nao ha fundo nem ::after a desenhar um quadrado por baixo. */
.selo{width:30px; height:30px; flex:none;
  background:url("logo.png") center/contain no-repeat}

.btn{font:inherit; font-weight:500; font-size:14px; border:1px solid var(--line); border-radius:99px;
  padding:9px 18px; cursor:pointer; background:var(--card); color:var(--ink)}
.btn:hover{border-color:var(--cruz)}
.btn-p{background:var(--accent); color:#FFF; border-color:var(--accent); font-weight:700}
.btn-p:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.nota{margin:var(--s3) 0 0; font-size:13px; color:var(--muted-2); text-align:center; line-height:1.6}
.nota b{color:var(--ink); font-weight:500}
.erro{background:var(--red-soft); color:#8E2119; border-radius:var(--r-s); padding:11px 14px; font-size:13px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ============================================================
   A RODA DE ESPERA

   Não é um GIF, de propósito. Um GIF é um pedido de rede a mais exactamente
   quando a rede está lenta -- ou seja, chega tarde precisamente nas vezes em que
   era preciso. Tem a cor cozida lá dentro, e aqui há tema claro e tema escuro.
   E fica serrado nos ecrãs bons. Isto faz o mesmo em oito linhas de CSS, herda a
   cor de quem a rodeia e é nítida em qualquer ecrã.

   O ATRASO É A PARTE QUE IMPORTA, e é ele que responde ao comentário que estava
   no ecrã de abertura: uma roda que aparece e desaparece em duzentos
   milissegundos é outro salto, e o salto era o que se andou a tirar. Por isso
   nasce invisível e só se mostra aos 400ms. Se a resposta chegar antes, ninguém
   viu nada -- e quando não chega, há o que olhar.
   ============================================================ */
@keyframes rodar { to { transform:rotate(1turn) } }
@keyframes surgir { from { opacity:0 } to { opacity:1 } }

.roda{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.15em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  opacity:.5; animation:rodar .7s linear infinite }

/* A espera de um bloco inteiro: a roda, uma linha a dizer o que se espera, e o
   atraso. O texto não é decoração -- «A ler as transacções» e «A acordar a
   máquina dos saques» esperam-se de maneiras diferentes. */
.espera{ padding:52px 20px; display:grid; place-items:center; gap:13px;
  color:var(--muted-2); font-size:13.5px; line-height:1.5; text-align:center;
  animation:surgir .2s ease .4s both }
.espera .roda{ width:22px; height:22px; border-width:2.5px; opacity:.45 }
.espera b{ color:var(--muted); font-weight:600 }
/* O hidden perde para qualquer regra de display do autor. */
.espera[hidden]{ display:none !important }

/* Dentro de um número grande (um KPI à espera), a roda toma o tamanho dele. */
.kpi .v .roda{ width:.62em; height:.62em; border-width:2.5px; vertical-align:.02em }

/* Quem pediu menos movimento não fica sem saber que algo está a acontecer:
   abranda-se, não se desliga. Uma roda parada é indistinguível de um ecrã morto,
   e a dúvida entre «está a pensar» e «morreu» é a pior de todas. */
@media (prefers-reduced-motion:reduce){
  .roda{ animation-duration:2.4s }
  .espera{ animation-delay:0s }
}