/* Scanner: folha unica, sem framework, sem fonte externa.
   Desenhada para o celular primeiro. As regras de escala sao duras de
   proposito: cinco tamanhos de texto, sete de espaco, tres de raio. Foi a
   falta disso que fazia a tela anterior parecer montada, nao desenhada. */

:root {
  color-scheme: dark light;

  /* "Mesa, luz e tinta": a interface e a mesa escura sob a luz da luminaria,
     o documento e a unica coisa branca e quadrada na tela, e um unico ambar
     faz o papel de luz. Saiu o azul de framework (#3d8bfd), que alem de nao
     dizer nada sobre papel reprovava em contraste: 3,33:1 com texto branco,
     contra os 4,5:1 exigidos. O ambar com texto escuro da 9,4:1. */

  --mesa-0: #0e0d0b;          /* fundo, grafite quente */
  --mesa-1: #16140f;          /* superficie levantada */
  --mesa-2: #201d17;          /* controle */
  --fio: #2b2720;             /* linha */
  --fio-2: #3b362c;           /* linha em destaque */
  --tinta: #f7f4ee;           /* texto */
  --tinta-2: #a8a196;         /* texto secundario, 7,6:1 */
  --tinta-3: #8b8378;         /* texto terciario, 5,1:1 (o antigo dava 4,14) */
  --luz: #e8a33d;             /* acao */
  --luz-texto: #14100c;       /* texto sobre a acao, 9,4:1 */
  --luz-fundo: rgba(232, 163, 61, 0.12);
  --selo: #c2412f;            /* perigo */
  --ok: #3e9c6b;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  /* Escala tipografica de verdade: 12/14/17/20/24/32 em vez de cinco degraus
     com a mesma altura de linha. Titulo nao respira como paragrafo. */
  --t-mini: 0.75rem;   /* 12 */
  --t-peq: 0.875rem;   /* 14 */
  --t-base: 1.0625rem; /* 17 */
  --t-med: 1.25rem;    /* 20 */
  --t-gr: 1.5rem;      /* 24 */
  --t-max: 2rem;       /* 32 */

  /* Raio por SIGNIFICADO, nao um valor para tudo. Papel tem canto reto. */
  --r-papel: 2px;
  --r-p: 12px;         /* controle */
  --r-m: 16px;
  --r-g: 28px;         /* gaveta */

  /* Duas camadas mais um realce em cima: luz vinda de cima, como a luminaria */
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -10px rgba(0, 0, 0, 0.6);
  --realce-topo: inset 0 1px 0 rgba(255, 244, 225, 0.06);

  /* Movimento: pressao entra rapido, soltura volta com uma leve ultrapassagem.
     Usar a mesma curva nos dois sentidos e o que faz parecer pagina web. */
  --entra: 90ms cubic-bezier(0.4, 0, 0.2, 1);
  --volta: 260ms cubic-bezier(0.34, 1.28, 0.64, 1);
  --gaveta: 300ms cubic-bezier(0.32, 0.72, 0, 1);
  --chega: 220ms cubic-bezier(0.2, 0, 0, 1);

  /* Versoes translucidas das superficies, para as barras que borram o fundo.
     Elas estavam com a cor escrita na mao (rgba(11,12,14,...)), e por isso
     continuavam pretas quando o iPhone estava no tema claro. */
  --veu-0: rgba(14, 13, 11, 0.82);
  --veu-1: rgba(22, 20, 15, 0.88);
  --veu-2: rgba(32, 29, 23, 0.92);

  --barra: calc(64px + env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: light) {
  :root {
    --mesa-0: #efeae1;        /* papel envelhecido */
    --mesa-1: #f7f4ee;
    --mesa-2: #ffffff;
    --fio: #dcd5c8;
    --fio-2: #c7bfae;
    --tinta: #14100c;
    --tinta-2: #5c564c;
    --tinta-3: #7a7368;
    --luz: #a8641a;
    --luz-texto: #ffffff;
    --luz-fundo: rgba(168, 100, 26, 0.1);
    --selo: #a32b1c;
    --ok: #2f7a52;
    --sombra: 0 1px 2px rgba(60, 48, 30, 0.1), 0 12px 28px -12px rgba(60, 48, 30, 0.22);
    --realce-topo: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --veu-0: rgba(239, 234, 225, 0.84);
    --veu-1: rgba(247, 244, 238, 0.9);
    --veu-2: rgba(255, 255, 255, 0.94);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--mesa-0);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
               "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body { padding-bottom: calc(var(--barra) + var(--e5)); }
a { color: inherit; text-decoration: none; }

/* Icone SVG: herda a cor de quem o contem e nunca encolhe dentro de um flex.
   `display: block` tira o espaco fantasma que a linha de base do texto cria
   embaixo de um elemento inline. */
.ic { display: block; flex: 0 0 auto; }

/* Os dois gestos assinatura do app sao segurar o dedo em cima de uma imagem:
   arrastar para reordenar, e segurar para ver a foto original. No iOS, sem
   estas duas linhas, o sistema abre o menu "Salvar imagem / Copiar" por cima
   da interface e mata os dois. Sao duas linhas de CSS entre parecer site e
   parecer aplicativo. */
.pg, .pg img, #visor-img, .opcao, .fita, .btn, .topo h1 {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* O campo de renomear e a excecao: ali selecionar texto e o ponto. */
.topo h1 input { -webkit-user-select: text; user-select: text; }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 2px; border-radius: var(--r-p); }

/* ------------------------------------------------------------- cabecalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 52px;
  padding: var(--e2) var(--e4);
  padding-top: calc(var(--e2) + env(safe-area-inset-top));
  padding-left: max(var(--e3), env(safe-area-inset-left));
  padding-right: max(var(--e3), env(safe-area-inset-right));
  background: var(--veu-0);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--fio);
}

.topo h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-med);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.014em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Dica de que da para renomear. Antes isso era `title="Toque para renomear"`,
   que no iOS nao aparece de jeito nenhum: o unico jeito de descobrir era
   adivinhar. */
.topo h1 .ic { opacity: 0.4; }
.topo h1 input + .ic, .topo h1 input ~ .ic { display: none; }

.topo h1 input {
  width: 100%;
  padding: var(--e1) var(--e2);
  border: 1px solid var(--luz);
  border-radius: var(--r-p);
  background: var(--mesa-2);
  color: var(--tinta);
  font: inherit;
}

.voltar, .icone-topo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border: 0;
  border-radius: var(--r-p);
  background: transparent;
  color: var(--tinta);
  font-size: var(--t-med);
  cursor: pointer;
}
.icone-topo { margin: 0 -10px 0 0; color: var(--tinta-2); }

.corpo { max-width: 900px; margin: 0 auto; padding: var(--e4); }

/* ---------------------------------------------------------------- botoes */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: 0 var(--e4);
  border: 1px solid var(--fio);
  border-radius: var(--r-m);
  background: var(--mesa-2);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--volta), background var(--volta), border-color var(--volta);
}
@media (hover: hover) { .btn:hover { border-color: var(--fio-2); } }
.btn:active { transform: scale(0.96); background: var(--fio); transition: transform var(--entra), background var(--entra); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.btn.acao { background: var(--luz); border-color: var(--luz); color: var(--luz-texto); font-weight: 600; }
.btn.vazio { background: transparent; }
.btn.perigo { color: var(--selo); }
.btn.largo { flex: 1; }

/* --------------------------------------------------------- barra inferior */

.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: var(--e2);
  height: var(--barra);
  padding: 0 max(var(--e3), env(safe-area-inset-left)) env(safe-area-inset-bottom)
           max(var(--e3), env(safe-area-inset-right));
  background: var(--veu-1);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--fio);
}
.barra .btn { min-height: 48px; }
.barra .quadrado { width: 52px; padding: 0; }

/* ---------------------------------------------------------------- gaveta */

.veu {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.veu.aberta { opacity: 1; pointer-events: auto; }

.gaveta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 21;
  padding: var(--e3) var(--e3) calc(var(--e5) + env(safe-area-inset-bottom));
  background: var(--mesa-1);
  border-top-left-radius: var(--r-g);
  border-top-right-radius: var(--r-g);
  border-top: 1px solid var(--fio);
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 84vh;
  overflow-y: auto;
}
.gaveta.aberta { transform: translateY(0); }
.gaveta::before {
  content: "";
  display: block;
  width: 38px; height: 4px;
  margin: 0 auto var(--e3);
  border-radius: 2px;
  background: var(--fio-2);
}
.gaveta h2 { margin: 0 var(--e2) var(--e3); font-size: var(--t-peq); font-weight: 600; color: var(--tinta-2); }

.opcao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 56px;
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e1);
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.25;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.12s ease;
}
.opcao:active { background: var(--mesa-2); transform: scale(0.99); }
.opcao .marca {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: var(--r-p);
  background: var(--luz-fundo);
  color: var(--luz);
}
.opcao small { display: block; margin-top: 2px; font-size: var(--t-mini); font-weight: 400; color: var(--tinta-3); }
.opcao.perigo { color: var(--selo); }
.opcao.perigo .marca { background: rgba(194, 65, 47, 0.16); color: var(--selo); }
.separador { height: 1px; margin: var(--e2) var(--e3); background: var(--fio); }

/* --------------------------------------------------------------- listas */

.documentos { display: grid; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.documentos a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2);
  border: 1px solid var(--fio);
  border-radius: var(--r-m);
  background: var(--mesa-1);
  transition: transform 0.12s ease;
}
.documentos a:active { transform: scale(0.99); }
.capa {
  flex: 0 0 52px;
  width: 52px; height: 68px;
  border-radius: var(--r-p);
  background: #fff center/cover no-repeat;
  border: 1px solid var(--fio);
}
.capa { object-fit: cover; }
.capa.sem { display: grid; place-items: center; background: var(--mesa-2); color: var(--tinta-3); font-size: var(--t-med); }
.doc-nome { font-size: var(--t-base); font-weight: 550; }
.doc-info { margin-top: 2px; font-size: var(--t-mini); color: var(--tinta-3); }

/* ------------------------------------------------------- grade de paginas */

.paginas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* linha maior que coluna: o numero da pagina mora abaixo do papel */
  gap: var(--e6) var(--e3);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 620px) { .paginas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .paginas { grid-template-columns: repeat(4, 1fr); } }

.pg {
  position: relative;
  aspect-ratio: 1 / 1.414;
  border-radius: var(--r-papel);
  /* sem overflow:hidden aqui: o numero da pagina mora FORA do papel e era
     cortado por ele. Quem arredonda agora e a propria imagem. */
  background: #fff;
  box-shadow: var(--sombra);
  animation: entrar 0.18s ease both;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--volta), box-shadow var(--volta);
  /* pan-y, nao manipulation: o dedo continua rolando a pagina na vertical,
     mas o arrasto horizontal para reordenar chega ao JavaScript em vez de ser
     engolido pelo Safari. */
  touch-action: pan-y;
}
.pg:active { transform: scale(0.97); transition: transform var(--entra); }
.pg img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  border-radius: inherit; }

@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* O numero da pagina fica FORA do papel, encostado no canto de baixo.
   Antes era um circulo escuro pousado sobre o canto de cima da folha, e ali
   ele cobria a primeira palavra do documento: numa grade de contratos, os
   tres cartoes mostravam "ONTRATO" no lugar de "CONTRATO". Documento e para
   ser lido; nada da interface pode ficar por cima dele. */
.pg .n {
  position: absolute;
  right: 0; bottom: -2px;
  transform: translateY(100%);
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-3);
  font-size: var(--t-mini);
  font-variant-numeric: tabular-nums;
}
.pg .conferir {
  position: absolute;
  left: var(--e2); right: var(--e2); bottom: var(--e2);
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(194, 65, 47, 0.95);
  color: #f7f4ee;
  color: #14100c;
  font-size: var(--t-mini);
  text-align: center;
}

.pg .conferir.aviso { background: rgba(232, 163, 61, 0.95); }

.pg.processando::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 30%, rgba(232, 163, 61, 0.38) 50%, transparent 70%);
  background-size: 100% 240%;
  animation: varredura 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Varredura de cima para baixo, como a luz do escaner passando na folha.
   Antes era um brilho azul deslizando de lado, que nao diz nada sobre o que
   o servidor esta fazendo. */
@keyframes varredura { from { background-position: 0 -120%; } to { background-position: 0 120%; } }

.pg.erro::after {
  content: attr(data-erro);
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: grid;
  place-items: center;
  padding: var(--e3);
  background: var(--veu-2);
  color: var(--selo);
  font-size: var(--t-mini);
  text-align: center;
}

.pg.arrastando { opacity: 0.4; }
.pg.alvo { outline: 2px solid var(--luz); outline-offset: 2px; }

.mais {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.414;
  border: 1px dashed var(--fio-2);
  border-radius: var(--r-p);
  background: transparent;
  color: var(--tinta-3);
  font-size: var(--t-peq);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mais span { font-size: 1.6rem; display: block; margin-bottom: 4px; }

/* -------------------------------------------------------------- prevIa */

/* O visor fica escuro NOS DOIS TEMAS, de proposito. Aqui o documento e o
   assunto, e fundo escuro e o que faz o olho julgar branco de papel e preto
   de tinta sem ser enganado pela moldura. Visualizador de foto de celular faz
   o mesmo. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  background: #080706;
}
.visor.aberto { display: flex; }
.visor-topo, .visor-base {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  background: var(--veu-0);
}
.visor-topo { padding-top: calc(var(--e2) + env(safe-area-inset-top)); }
.visor-base { padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom)); overflow-x: auto; }
.visor-palco { flex: 1; display: grid; place-items: center; overflow: hidden; padding: var(--e2); }
.visor-palco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-titulo { flex: 1; font-size: var(--t-peq); color: var(--tinta-2); text-align: center; }

.fitas { display: flex; gap: var(--e2); }
/* A fita rolava para fora da tela sem nenhuma pista de que havia mais coisa
   a direita: no visor, "Cor realcada" ficava selecionado e sobrava um chip
   cortado na borda. A mascara esmaece a ponta, que e o sinal de "continua". */
.fitas {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.fitas::-webkit-scrollbar { display: none; }

/* A ponta esmaecida e o unico jeito honesto de dizer "continua para o lado"
   sem gastar espaco com seta. Sem ela, o chip da direita aparecia cortado no
   meio e parecia defeito. A mascara vale so na base do visor, que e onde a
   fita e mais larga que a tela; na gaveta os chips cabem. */
.visor-base {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.fita {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--e3);
  border: 1px solid var(--fio);
  border-radius: 999px;
  background: var(--mesa-2);
  color: var(--tinta-2);
  font-family: inherit;
  font-size: var(--t-peq);
  font-weight: 500;
  line-height: 1;
  scroll-snap-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--volta), border-color var(--volta), background var(--volta);
}
.fita:active { transform: scale(0.96); transition: transform var(--entra); }
.fitas-tamanho { padding: 0 var(--e2) var(--e2); }
.fita.ativa { border-color: var(--luz); background: var(--luz-fundo); color: var(--tinta); }
.fita.ativa .ic { color: var(--luz); }

/* --------------------------------------------------------------- avisos */

/* z-index acima do visor (30), nao abaixo.
   A tarja e quem PEDE CONFIRMACAO para apagar, e apagar pagina se faz dentro
   do visor em tela cheia. Com 25 ela nascia atras dele: quem tocava a lixeira
   nao via nada acontecer, e a pagina nunca era apagada. Aviso que aparece
   atras da tela e o mesmo que aviso nenhum. */
.tarja {
  position: fixed;
  left: var(--e3); right: var(--e3);
  bottom: calc(var(--barra) + var(--e2));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--r-m);
  background: var(--mesa-2);
  border: 1px solid var(--fio-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  font-size: var(--t-peq);
  /* Escondida de verdade: so o transform nao bastava. Como a tarja fica
     ancorada ACIMA da barra de baixo, empurrar 140% da propria altura ainda
     deixava uma fatia dela aparecendo na beirada da tela, que e aquela
     "barrinha fina" sem explicacao. Agora ela sai inteira, para de receber
     toque e some da arvore de acessibilidade. */
  transform: translateY(calc(100% + var(--barra) + var(--e5)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.18s ease, visibility 0s linear 0.24s;
}
.tarja.aberta {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.18s ease, visibility 0s;
}
.tarja span { flex: 1; }
/* 44px de alvo: com 14px de texto e 8px de recheio dava 30px, abaixo do
   minimo, e este e o botao que confirma apagar. */
.tarja button {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--r-p);
  background: transparent;
  color: var(--luz);
  font-family: inherit; font-size: var(--t-peq); font-weight: 600; line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tarja button:active { background: var(--luz-fundo); }
.tarja.ruim { border-color: rgba(194, 65, 47, 0.55); }

/* Com o visor aberto nao existe barra inferior, e sim a fita de acabamentos.
   Sem isto a tarja pousava em cima dos chips. */
body:has(.visor.aberto) .tarja { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* Com uma gaveta aberta, o rodape da tela pertence a ela: os chips de tamanho
   do PDF ficam justamente na faixa onde a tarja pousa. Nesse caso o aviso vai
   para o alto, onde nao cobre nada que a pessoa precise tocar. */
body:has(.gaveta.aberta) .tarja {
  bottom: auto;
  top: calc(var(--e3) + env(safe-area-inset-top));
}

/* O estado vazio ficava colado no topo, com dois tercos da tela em branco
   embaixo. Centralizado no espaco que sobra entre o cabecalho e a barra, ele
   deixa de parecer conteudo que faltou carregar. */
.vazio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100dvh - 52px - var(--barra) - var(--e7));
  padding: var(--e5) var(--e4);
  text-align: center;
  color: var(--tinta-2);
}
@supports not (height: 100dvh) {
  .vazio { min-height: calc(100vh - 52px - var(--barra) - var(--e7)); }
}
.vazio .selo {
  width: 68px; height: 68px;
  margin: 0 auto var(--e4);
  display: grid; place-items: center;
  border-radius: var(--r-g);
  background: var(--mesa-1);
  box-shadow: var(--realce-topo);
  color: var(--luz);
}
.vazio h2 { margin: 0 0 var(--e2); font-size: var(--t-med); font-weight: 600; color: var(--tinta); letter-spacing: -0.02em; }
.vazio p { margin: 0 auto; max-width: 34ch; font-size: var(--t-peq); }

.recado { margin: var(--e3) 0 0; font-size: var(--t-mini); color: var(--tinta-3); text-align: center; }

/* ------------------------------------------------------------- ajustar */

.instrucao { margin: 0 0 var(--e3); font-size: var(--t-peq); color: var(--tinta-2); text-align: center; }
.palco { display: grid; place-items: center; background: #000; border-radius: var(--r-m); padding: var(--e2); }
#tela { touch-action: none; border-radius: var(--r-p); max-width: 100%; }

/* -------------------------------------------------- botao trabalhando

   Substitui o antigo truque de trocar o texto do botao por "Aguarde...", que
   apagava os <span> e <small> de dentro dos botoes da gaveta. Aqui o rotulo
   fica no lugar, apenas apagado, e um anel gira por cima. Como nada muda de
   largura, a fita de acabamentos para de pular. */

.ocupado { position: relative; color: transparent !important; }
.ocupado > * { opacity: 0.25; }
.ocupado::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--tinta);
  animation: girando 0.7s linear infinite;
}
.btn.acao.ocupado::after { color: var(--luz-texto); }

@keyframes girando { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* O indicador de trabalho e a excecao: sem ele, quem usa movimento
     reduzido fica sem nenhum sinal de que o servidor esta processando. */
  .ocupado::after { animation-duration: 0.7s !important; }
  .pg.processando::after { animation-duration: 1.1s !important; }
}