/* estilo.css — o visual do app inteiro.
 *
 * Quem usa: Silvano, 53 anos, lê muito mal e enxerga mal, no sol, com o dedo sujo
 * de terra. Daí as regras que não se negociam (telas.md, seção 0):
 *   - letra-base 22px, nada abaixo de 20px, sem texto cinza, contraste 7:1;
 *   - alvo de toque de 64px no mínimo, os principais de 72 a 96px;
 *   - nunca só a cor: todo estado tem cor + desenho + palavra;
 *   - fundo branco (no sol lê melhor) e sem modo escuro.
 * Tamanho de letra em rem, com a raiz travada em 16px (ver html, abaixo): o app NÃO segue
 * a letra maior do Android, por decisão do Rafael em 12/10/2026; js/escala.js desfaz o zoom
 * de página. Altura de botão em px com min-height: se um dia a letra crescer, o botão
 * cresce, nunca corta o rótulo.
 */

/* ------------------------------------------------------------------ fonte */

/* Atkinson Hyperlegible: feita pelo Braille Institute para baixa visão (I, l e 1
 * não se confundem). Guardada no app: abre sem internet. Licença em fontes/OFL.txt.
 * Ela só tem dois pesos; o regular cobre 400–599 para que o "peso mínimo 500" da
 * especificação use a letra de verdade e não um negrito inventado pelo navegador. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fontes/atkinson-regular.woff2') format('woff2');
  font-weight: 400 599;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fontes/atkinson-bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* G3 — cores com função. Cada par texto/fundo passa de 7:1. */
  --verde: #14532D;          /* ação principal, "bom", "pronto" — letra branca 9,1:1 */
  --verde-topo: #166534;     /* topo do degradê do botão verde — ainda 7,1:1 com branco */
  --verde-claro: #DCFCE7;    /* item escolhido, "trabalhando" — letra #1A1A1A */
  --amarelo: #FFC928;        /* atenção, esperando — letra #1A1A1A 11:1 */
  --amarelo-claro: #FFF6D6;  /* fundo de aviso de atenção */
  --vermelho: #8F1A1A;       /* perde dinheiro, máquina vencida — letra branca 9:1; como
                                letra sobre --vermelho-claro 7,4:1 (o #9B1C1C dava 6,7) */
  --vermelho-claro: #FEE2E2; /* fundo de aviso grave — letra #1A1A1A */
  --texto: #1A1A1A;
  --fundo: #FFFFFF;
  --borda: #4A4A4A;          /* contorno forte (botão voltar, tecla) */
  --contorno: #5B7F67;       /* contorno de cartão: 4:1 com o branco, aparece no sol */
  --sombra-cor: 20, 83, 45;  /* verde do app, para a sombra não ficar cinza-suja */

  /* Marca da conta: troca por conta (SaaS). app.js sobrescreve com as cores da conta.
   * ATENÇÃO: nenhuma delas tem 7:1 com letra branca (--marca dá 6,7:1). Servem para
   * enfeite, borda e fundo claro; botão com texto continua em --verde. */
  --marca: #046A38;
  --marca-2: #00B140;
  --destaque: #FFAE00;       /* foco do teclado e realce; letra #1A1A1A 9,4:1 */

  /* G2 — tipografia */
  --fonte: 'Atkinson Hyperlegible', Roboto, 'Segoe UI', system-ui, sans-serif;
  --letra-base: 1.375rem;    /* 22px */
  --letra-minima: 1.25rem;   /* 20px — nada abaixo disto */
  --letra-rotulo: 1.5rem;    /* 24px, rótulo de botão */
  --letra-titulo: 1.75rem;   /* 28px */
  --letra-numero: 2.5rem;    /* 40px, quantidade e hora */
  --letra-preco: clamp(2.5rem, 13vw, 3.5rem);   /* 56px, preço, relógio, medida final */

  /* forma */
  --raio: 24px;
  --raio-medio: 20px;
  --raio-pequeno: 14px;
  --sombra: 0 1px 2px rgba(var(--sombra-cor), .10), 0 6px 18px rgba(var(--sombra-cor), .12);
  --sombra-forte: 0 2px 4px rgba(var(--sombra-cor), .14), 0 10px 28px rgba(var(--sombra-cor), .22);
  --sombra-apertado: 0 1px 2px rgba(var(--sombra-cor), .14);

  /* G4 e §9 — medidas de toque e de página */
  --toque: 64px;
  --toque-medio: 72px;
  --toque-grande: 88px;
  --margem: 16px;            /* respiro lateral da página */
  --vao: 12px;               /* folga entre alvos e entre blocos */
  --largura-maxima: 480px;
  --altura-barra: 64px;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

/* Palavra NUNCA se parte: nem com hífen ("MÁQUI-NAS") nem sem ele ("MÁQUI / NAS").
 * Quem lê mal não junta os pedaços. Vale para o app inteiro, inclusive o CSS das
 * telas (por isso o !important). Palavra que não cabe encolhe a letra: o app.js
 * passa caber_palavras() em toda tela (componentes.js). */
*, *::before, *::after {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}

html {
  /* O tamanho de letra/zoom de acessibilidade do celular NÃO muda o app (decisão do Rafael,
   * 12/10/2026: "do jeito que fizemos"). Raiz em px fixo: 1rem vale 16px mesmo que o
   * navegador diga que a letra-padrão é maior (e o <meta name="text-scale">, se um dia
   * alguém ligar, não surte efeito com a raiz em px). text-size-adjust none desliga o
   * "aumentar letra" automático do Chrome/Safari do celular. O zoom de PÁGINA (que muda a
   * largura em px) não se trava aqui: é o js/escala.js que o desfaz. */
  font-size: 16px;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background: var(--fundo);
  /* Corta o zoom do toque duplo (que atrasa todo toque em 300ms e faz a tela pular)
   * sem tirar a pinça: quem enxerga mal ainda amplia com dois dedos. */
  touch-action: manipulation;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--letra-base);
  font-weight: 500;
  line-height: 1.3;
  /* quebra de linha só entre palavras (herdado por tudo) */
  overflow-wrap: normal;
  word-break: normal;
  /* Rolagem para o lado nunca: a página tem de caber em 360px. clip (e não hidden)
   * não cria barra de rolagem escondida que o dedo acharia por acaso. */
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }

/* hidden vale mesmo em peça que o CSS pôs em grid/flex */
[hidden] { display: none !important; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

h1, h2, h3, p { margin: 0; }

:focus-visible {
  outline: 4px solid var(--destaque);
  outline-offset: 3px;
}

.sem-script {
  padding: var(--margem);
  font-size: var(--letra-base);
}

/* Texto só para leitor de tela (a tela já mostra o desenho). */
.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ página */

/* Uma coluna de até 480px no meio. No celular (360–412) ocupa tudo. */
#app {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fundo);
  /* Enquanto a faixa DESFAZER está na tela, o componente (mostrar_desfazer) diz quanto do pé da
   * janela ela ocupa em --reserva-desfazer. Esse espaço sai da tela (ver .tela) e fica aqui,
   * vazio, para a faixa nunca cobrir botão. Sem faixa a variável não existe e vale 0. */
  padding-bottom: var(--reserva-desfazer, 0px);
}

/* No computador (o Rafael conferindo), a coluna ganha moldura para parecer celular. */
@media (min-width: 560px) {
  html, body { background: #EEF6F0; }
  #app { box-shadow: 0 0 0 1px rgba(var(--sombra-cor), .12), 0 12px 40px rgba(var(--sombra-cor), .14); }
}

/* Cada tela: coluna da altura da janela. A barra gruda em cima, o rodapé gruda
 * embaixo, e o meio cresce. Se o conteúdo for maior que a tela, a PÁGINA rola e
 * barra e rodapé continuam à vista (sticky). */
.tela {
  display: flex;
  flex-direction: column;
  gap: var(--vao);
  min-height: calc(100vh - var(--reserva-desfazer, 0px));
  min-height: calc(100dvh - var(--reserva-desfazer, 0px));
  padding: 0 var(--margem);
  /* O que passar da borda (palavra que nem a 20px coube, desenho largo de outra tela)
   * é cortado AQUI. Sem isto o Chrome do Android alarga a página inteira e tudo
   * encolhe. clip, e não hidden: não vira caixa de rolagem e o sticky da barra e do
   * rodapé continua funcionando. */
  overflow-x: clip;
}

.corpo {
  display: flex;
  flex-direction: column;
  gap: var(--vao);
  flex: 1 0 auto;
}

/* ------------------------------------------------------------------ barra de cima (G1) */

.barra-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(-1 * var(--margem));
  padding: env(safe-area-inset-top, 0px) var(--margem) 4px;
  background: var(--fundo);
}

.barra {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(var(--altura-barra) + 12px);
  padding: 6px 0;
}

.barra-centro {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Barra que não cabe numa linha (letra grande, nome comprido, celular estreito): o componentes.js põe
 * .quebrada em .barra-wrap e a barra vira duas linhas. Em cima ficam os botões (voltar, casinha, ouvir); o que
 * estava no meio (a saudação, o nome) desce inteiro para a linha de baixo. Palavra nunca se parte. */
.barra-wrap.quebrada .barra { flex-wrap: wrap; min-height: 0; row-gap: 2px; }
.barra-wrap.quebrada .barra > .barra-centro { order: 2; flex: 1 0 100%; justify-content: flex-start; padding-bottom: 4px; }
.barra-wrap.quebrada .barra > .botao-falar { margin-left: auto; }

.botao-voltar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border: 3px solid var(--texto);
  border-radius: var(--raio-medio);
  background: var(--fundo);
  color: var(--texto);
  box-shadow: var(--sombra);
}

.botao-voltar .icone { width: 36px; height: 36px; }

/* Lugar do VOLTAR na tela inicial: o nome/logo da conta, que não responde a toque. */
.barra-logo {
  flex: 0 1 auto;
  min-width: var(--toque);
  min-height: var(--toque);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--letra-minima);
  font-weight: 700;
  color: var(--verde);
  line-height: 1.1;
}

.barra-logo img { width: 56px; height: 56px; object-fit: contain; }

.botao-falar {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--verde-topo), var(--verde) 70%);
  color: #fff;
  box-shadow: var(--sombra-forte);
}

.botao-falar .icone { width: 36px; height: 36px; }

/* G5: enquanto fala, um anel pulsa em volta. Tocar de novo para a fala. */
.botao-falar.falando::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 4px solid var(--destaque);
  animation: pulsar 1.1s ease-out infinite;
}

/* FALAR grande, sozinho no meio da tela (T03 "Olá"). */
.botao-falar.gigante {
  width: 120px;
  height: 120px;
}
.botao-falar.gigante .icone { width: 64px; height: 64px; }

.titulo {
  font-size: var(--letra-titulo);
  font-weight: 700;
  line-height: 1.15;
  padding: 2px 0 6px;
  overflow-wrap: normal;
}

/* ------------------------------------------------------------------ rodapé fixo */

.rodape {
  position: sticky;
  /* Com a faixa DESFAZER na tela o rodapé fica acima dela, não debaixo (a reserva leva 12px de
   * respiro e o rodapé já tem o padding dele, por isso o desconto). */
  bottom: max(0px, calc(var(--reserva-desfazer, 0px) - 12px));
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: var(--vao);
  margin: auto calc(-1 * var(--margem)) 0;
  padding: var(--vao) var(--margem) calc(var(--margem) + env(safe-area-inset-bottom, 0px));
  /* Esmaece por cima para o conteúdo que passa por baixo não brigar com o botão. */
  background: linear-gradient(to top, var(--fundo) 78%, rgba(255, 255, 255, 0));
}

.rodape-lado-a-lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vao);
}

/* ------------------------------------------------------------------ toque (G4) */

/* Ao encostar o botão afunda. A classe "apertado" é posta pelo app.js no
 * pointerdown: o :active do Android chega atrasado e às vezes nem chega. */
.tocavel {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
}

.tocavel:active,
.tocavel.apertado {
  transform: scale(.97);
  box-shadow: var(--sombra-apertado);
}

/* ------------------------------------------------------------------ desenho */

/* As ilustrações 3D (.webp, fundo transparente). Tamanho pela variável --tam. */
.desenho {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--tam, 104px);
  height: var(--tam, 104px);
}

.desenho img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* sombra que segue o recorte do desenho, não o quadrado da imagem */
  filter: drop-shadow(0 4px 6px rgba(var(--sombra-cor), .18));
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Desenho que ainda não chegou: quadrado verde-claro com o nome, para a tela
 * não quebrar enquanto o conjunto de ilustrações é gerado. */
.desenho-falta {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 6px;
  border: 3px dashed var(--verde);
  border-radius: var(--raio-medio);
  background: var(--verde-claro);
  color: var(--verde);
  font-size: var(--letra-minima);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  overflow: hidden;
}

/* ------------------------------------------------------------------ cartão-desenho */

/* Desenho grande + palavra curta em CAIXA ALTA. Dois formatos:
 *   forma-quadro: desenho em cima, palavra embaixo (grade de 2 colunas);
 *   forma-linha:  desenho à esquerda, palavra à direita (lista, pergunta de 1 toque).
 * container-type: o tamanho do desenho segue o tamanho do PRÓPRIO cartão, não o da
 * janela (lição do painel: media query mede a janela, não o cartão). */
.cartao-desenho {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: var(--toque);
  padding: 12px 10px 14px;
  border: 3px solid var(--contorno);
  border-radius: var(--raio);
  background: linear-gradient(180deg, #FFFFFF 0%, #F3FAF5 100%);
  color: var(--texto);
  text-align: center;
  box-shadow: var(--sombra);
}

.cartao-desenho.forma-quadro {
  /* §9: altura = largura + 10px (158×168 em 360, 184×194 em 412). Conteúdo maior
   * (rótulo em duas linhas, letra grande do Android) estica o cartão. */
  aspect-ratio: 158 / 168;
}

.cartao-desenho.forma-quadro .desenho {
  /* 72% da área de dentro ≈ 62% da largura do cartão (§9); o .webp tem respiro */
  width: var(--tam, 72cqi);
  height: var(--tam, 72cqi);
}

/* Quebra só entre palavras: quem lê mal não junta "MÁQUI-" com "NAS". Palavra que
 * não cabe encolhe a letra (caber_na_largura, até 20px). */
.cartao-desenho-rotulo {
  font-size: clamp(var(--letra-minima), 14cqi, var(--letra-rotulo));
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: normal;
  max-width: 100%;
}

.cartao-desenho.forma-linha {
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  min-height: clamp(120px, 20dvh, 160px);
  padding: 10px 16px 10px 10px;
  text-align: left;
}

.cartao-desenho.forma-linha .desenho {
  width: var(--tam, clamp(96px, 16dvh, 128px));
  height: var(--tam, clamp(96px, 16dvh, 128px));
}

.cartao-desenho.forma-linha .cartao-desenho-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.625rem; /* 26px — a palavra da opção empilhada (T35) */
}

/* Escolhido: fundo verde-claro, borda verde de 6px e selo ✓ (nunca só a cor). */
.cartao-desenho.escolhido {
  border: 6px solid var(--verde);
  padding: 9px 7px 11px;
  background: var(--verde-claro);
  box-shadow: 0 0 0 3px rgba(var(--sombra-cor), .15), var(--sombra-forte);
}

.cartao-desenho.forma-linha.escolhido { padding: 7px 13px 7px 7px; }

.selo-escolhido {
  position: absolute;
  top: -10px;
  right: -10px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: var(--sombra);
}

.cartao-desenho.escolhido .selo-escolhido { display: grid; }
.selo-escolhido .icone { width: 30px; height: 30px; }

/* Cartões com cor cheia (ex.: FAZER ORÇAMENTO na inicial). */
.cartao-desenho.cor-verde {
  border-color: var(--verde);
  background: linear-gradient(180deg, var(--verde-topo), var(--verde));
  color: #fff;
}
.cartao-desenho.cor-amarelo {
  border-color: #8A6A00;
  background: var(--amarelo);
}
.cartao-desenho.cor-verde-claro {
  border-color: var(--verde);
  background: var(--verde-claro);
}

/* Bolinha de número ou sinal no canto do cartão (3 esperando, ! vencida), por
 * cima da borda como o ✓: não rouba largura da palavra. */
.cartao-selo {
  position: absolute;
  top: -12px;
  right: -8px;
  z-index: 1;
}

/* ------------------------------------------------------------------ grade */

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vao);
}

.grade.colunas-1 { grid-template-columns: minmax(0, 1fr); }
.grade.colunas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ botões */

.botao-principal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 80px;
  padding: 10px 20px;
  border: 3px solid transparent;
  border-radius: var(--raio);
  font-size: var(--letra-rotulo);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  box-shadow: var(--sombra-forte);
}

.botao-principal.tamanho-grande { min-height: 96px; }
.botao-principal.tamanho-medio { min-height: 72px; }
.botao-principal.tamanho-pequeno { min-height: var(--toque); box-shadow: var(--sombra); }

.botao-principal .icone { width: 36px; height: 36px; flex: 0 0 auto; }
.botao-principal .desenho { --tam: 56px; }
.botao-principal-rotulo { flex: 0 1 auto; min-width: 0; overflow-wrap: normal; }

.botao-principal.cor-verde {
  background: linear-gradient(180deg, var(--verde-topo), var(--verde));
  color: #fff;
}

.botao-principal.cor-branco {
  background: var(--fundo);
  border-color: var(--verde);
  color: var(--texto);
  box-shadow: var(--sombra);
}
.botao-principal.cor-branco .icone { color: var(--verde); }

.botao-principal.cor-amarelo {
  background: var(--amarelo);
  border-color: #8A6A00;
  color: var(--texto);
}

.botao-principal.cor-vermelho {
  background: var(--vermelho);
  color: #fff;
}

/* "MANDAR ASSIM MESMO" (T40): o caminho arriscado é branco com borda vermelha. */
.botao-principal.cor-vermelho-contorno {
  background: var(--fundo);
  border: 4px solid var(--vermelho);
  color: var(--vermelho);
  box-shadow: var(--sombra);
}

/* G7: PRONTO ainda não liberado — contorno tracejado. Se tocado, fala o que falta. */
.botao-principal.travado {
  background: var(--fundo);
  border: 3px dashed var(--verde);
  color: var(--verde);
  box-shadow: none;
}

/* Bolinha com quantos foram escolhidos: PRONTO (2). */
.botao-contador {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 22px;
  background: #fff;
  color: var(--verde);
  font-size: var(--letra-rotulo);
  font-weight: 700;
}
.botao-principal.travado .botao-contador,
.botao-principal.cor-branco .botao-contador { background: var(--verde); color: #fff; }

/* ------------------------------------------------------------------ números */

.numero {
  font-size: var(--letra-numero);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.numero-grande {
  font-size: var(--letra-preco);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;           /* nunca quebra: encolhe (caber_na_largura) */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* "R$" menor ao lado do valor (T39: R$ 28px + 56px). */
.prefixo-moeda {
  font-size: 0.5em;              /* 28px ao lado de 56px; encolhe junto */
  font-weight: 700;
  margin-right: 6px;
}

.frase {
  font-size: var(--letra-base);
  line-height: 1.35;
}

/* Bolinha de contagem com cor + número (amarela = esperando, verde = aceitos...). */
.bolinha {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 22px;
  font-size: var(--letra-rotulo);
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: var(--sombra);
}
.bolinha.cor-verde { background: var(--verde); color: #fff; }
.bolinha.cor-amarelo { background: var(--amarelo); color: var(--texto); }
.bolinha.cor-vermelho { background: var(--vermelho); color: #fff; }
.bolinha .icone { width: 28px; height: 28px; }

/* Selo em pílula: SEU TEMPO, MEDIDA BOA, PREÇO DE EXEMPLO. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 14px 4px 8px;
  border-radius: 20px;
  font-size: var(--letra-minima);
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 auto;
  white-space: nowrap;
}
.selo .icone { width: 26px; height: 26px; }
.selo.cor-verde { background: var(--verde-claro); color: var(--verde); border: 2px solid var(--verde); }
.selo.cor-amarelo { background: var(--amarelo); color: var(--texto); }
.selo.cor-vermelho { background: var(--vermelho-claro); color: var(--vermelho); border: 2px solid var(--vermelho); }

/* ------------------------------------------------------------------ teclado gigante (§9) */

.teclado {
  display: flex;
  flex-direction: column;
  gap: var(--vao);
}

.teclado-visor {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15em;
  font-size: var(--letra-preco);  /* o valor e a unidade em em: encolhem juntos */
  white-space: nowrap;
  min-height: 80px;
  padding: 8px 12px;
  border-radius: var(--raio);
  background: var(--verde-claro);
  border: 3px solid var(--verde);
  font-variant-numeric: tabular-nums;
}

.teclado-visor-valor {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.05;
}

.teclado-visor-unidade {
  font-size: 0.5em;
  font-weight: 700;
}

/* Visor vazio: tracinho piscando em vez de "0", que pareceria um valor. */
.teclado-visor.vazio .teclado-visor-valor::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.12em;
  margin-left: 2px;
  background: var(--verde);
  vertical-align: baseline;
  animation: piscar 1s steps(1) infinite;
}

/* Número fora do limite (T31: "Esse número está muito grande"). */
.teclado-visor.fora {
  background: var(--vermelho-claro);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.teclado-teclas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tecla {
  display: grid;
  place-items: center;
  min-height: clamp(64px, 9dvh, 80px);   /* G4: nunca abaixo de 64 */
  border: 3px solid var(--contorno);
  border-radius: var(--raio-medio);
  background: linear-gradient(180deg, #FFFFFF, #F3FAF5);
  color: var(--texto);
  font-size: var(--letra-numero);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--sombra);
}

/* Celular baixo: a tecla já está no piso de 64 px; o que encolhe é a folga entre elas (os 8 px que
 * faltavam para o teclado de PÔR OS METROS caber acima do PRONTO em 360 × 600). */
@media (max-height: 780px) {
  .teclado { gap: 8px; }
  .teclado-teclas { gap: 8px; }
  .teclado-visor { min-height: 64px; padding-top: 2px; padding-bottom: 2px; }
}

.tecla.tecla-virgula { font-size: 3rem; }
.tecla.tecla-apagar { background: var(--amarelo-claro); border-color: #8A6A00; }
.tecla.tecla-apagar .icone { width: 44px; height: 44px; }
.tecla.tecla-vazia { visibility: hidden; }

/* ------------------------------------------------------------------ mais e menos */

.mais-menos {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  gap: var(--vao);
}

.mais-menos-botao {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--raio-medio);
  box-shadow: var(--sombra-forte);
}
.mais-menos-botao .icone { width: 48px; height: 48px; }
.mais-menos-botao.menos { background: var(--fundo); border: 3px solid var(--verde); color: var(--verde); }
.mais-menos-botao.mais { background: linear-gradient(180deg, var(--verde-topo), var(--verde)); color: #fff; }
.mais-menos-botao:disabled { opacity: 1; border-style: dashed; box-shadow: none; }
.mais-menos-botao.mais:disabled { background: var(--fundo); color: var(--verde); border: 3px dashed var(--verde); }

.mais-menos-valor {
  min-width: 0;
  text-align: center;
  font-size: var(--letra-preco);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;           /* nunca quebra: encolhe (caber_na_largura) */
}

/* O número que dá para tocar (mais_menos, digitavel): a caixa do número é um botão de pelo
 * menos 64 px que abre o teclado gigante. Dois sinais que não dependem de cor: a moldura grossa
 * (o número deixa de ser texto solto) e o lápis pequeno no canto. Fundo branco: sobre o cartão
 * verde-claro de "tem" a caixa continua aparecendo. A letra vem do .mais-menos-valor da tela
 * (font: inherit), então o encolher do caber_na_largura e o tamanho que cada tela escolhe valem. */
/* a caixa estica até a altura dos botões da linha (72 px) */
.mais-menos-valor.digitavel { display: flex; align-self: stretch; }
.mais-menos-numero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: var(--toque);
  min-height: var(--toque);
  padding: 0 4px;               /* o respiro do texto; a folga de cima do lápis vem em .so-texto */
  border: 3px solid var(--verde);
  border-radius: var(--raio-pequeno);
  background: var(--fundo);
  color: inherit;
  font: inherit;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--sombra-apertado);
}
/* número simples (texto, não um bloco montado pela tela): desce um pouco para o lápis do canto não encostar nele */
.mais-menos-numero.so-texto { padding-top: 10px; }
.mais-menos-texto { display: block; min-width: 0; text-align: center; }
.mais-menos-lapis {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--verde);
  pointer-events: none;
}
.mais-menos-lapis .icone { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ folha do número (pedir_numero) */

/* O teclado gigante por cima da tela de trás: tela cheia, na mesma coluna de 480 px do app.
 * No computador o resto da janela escurece. Acima da faixa DESFAZER (50). */
.folha-numero {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  background: var(--fundo);
}
@media (min-width: 560px) {
  .folha-numero { background: rgba(26, 26, 26, .5); }
}
.folha-numero-coluna {
  width: 100%;
  max-width: var(--largura-maxima);
  height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fundo);
  outline: none;
  animation: entrar .18s ease-out;
}
.folha-numero-coluna > .tela { min-height: 100%; }
/* o título numa linha só: "QUANTAS ÁRVORES PEQUENAS?" encolhe até 20 px em vez de ocupar duas linhas
 * e empurrar o PRONTO para fora do celular baixo */
.folha-numero .titulo { white-space: nowrap; }
@media (min-height: 701px) {
  .folha-numero .titulo { white-space: normal; }    /* com altura sobrando, o título pode ter duas linhas na letra de sempre */
}
/* o número de agora, "marcado" até a primeira tecla: a próxima tecla troca ele inteiro */
.folha-numero .teclado-visor.selecionado { background: var(--amarelo-claro); border-color: #8A6A00; }
/* "MÁXIMO 20" / "MÍNIMO 1" no lugar do PRONTO: sem o visto (ele diria que está pronto) e numa linha só */
.folha-numero .botao-principal.com-limite .icone { display: none; }
.folha-numero .botao-principal.com-limite .botao-principal-rotulo { white-space: nowrap; }
/* celular alto (412 × 915): o teclado ocupa o que sobrou, teclas maiores para o dedo não errar */
@media (min-height: 781px) {
  .folha-numero .teclado-visor { min-height: 104px; }
  .folha-numero .teclado-teclas { gap: 12px; }
  .folha-numero .tecla { min-height: clamp(72px, 11dvh, 112px); font-size: 3rem; }
  .folha-numero .tecla.tecla-apagar .icone { width: 52px; height: 52px; }
}
.folha-numero .rodape-lado-a-lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.folha-numero .rodape-lado-a-lado .botao-principal { padding-left: 8px; padding-right: 8px; }

/* ------------------------------------------------------------------ trilha (G8) */

/* Bolinhas do passo a passo. Não responde a toque (evita salto acidental). */
.trilha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  pointer-events: none;
}

.trilha-bolinha {
  flex: 0 1 20px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 14px;
  border-radius: 50%;
}

.trilha-bolinha.futuro {
  border: 3px solid var(--verde);
  background: var(--fundo);
}

.trilha-bolinha.feito {
  flex-basis: 24px;
  background: var(--verde);
  color: #fff;
}
.trilha-bolinha.feito .icone { width: 75%; height: 75%; }

.trilha-bolinha.atual {
  flex: 0 0 40px;
  border: 4px solid var(--verde);
  background: var(--verde-claro);
  box-shadow: var(--sombra);
}
.trilha-bolinha.atual .desenho { --tam: 30px; }
.trilha-bolinha.atual .desenho img { filter: none; }
.trilha-bolinha.atual .desenho-falta { border: 0; padding: 0; font-size: 0; background: var(--verde); border-radius: 50%; }

/* ------------------------------------------------------------------ régua de preço */

/* + / − anda numa régua: vermelha (perde dinheiro) | amarela (ganha pouco) | verde
 * (preço bom). Cada zona tem o seu sinal (✗ ! ✓): não depende de enxergar a cor. */
.regua-preco {
  position: relative;
  padding-top: 22px;
}

.regua-zonas {
  display: grid;
  grid-template-columns: var(--zona-vermelha, 1fr) var(--zona-amarela, 1fr) var(--zona-verde, 1fr);
  height: 40px;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid var(--texto);
}

.regua-zona {
  display: grid;
  place-items: center;
  min-width: 0;
}
.regua-zona .icone { width: 26px; height: 26px; }
.regua-zona.vermelha { background: var(--vermelho); color: #fff; }
.regua-zona.amarela { background: var(--amarelo); color: var(--texto); border-left: 3px solid var(--texto); border-right: 3px solid var(--texto); }
.regua-zona.verde { background: var(--verde); color: #fff; }

.regua-ponteiro {
  position: absolute;
  top: 0;
  left: var(--posicao, 50%);
  width: 0;
  height: 100%;
  transition: left .25s ease;
}

/* Triângulo preto em cima + agulha atravessando a régua. */
.regua-ponteiro::before {
  content: '';
  position: absolute;
  top: 0;
  left: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 20px solid var(--texto);
}
.regua-ponteiro::after {
  content: '';
  position: absolute;
  top: 16px;
  bottom: -6px;
  left: -4px;
  width: 8px;
  border-radius: 4px;
  background: var(--texto);
  box-shadow: 0 0 0 2px #fff;
}

/* ------------------------------------------------------------------ carinha */

.carinha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 16px;
  border-radius: var(--raio);
  border: 3px solid transparent;
  text-align: center;
}

.carinha .desenho { --tam: 112px; }

.carinha-palavra {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--letra-titulo);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}

.carinha-sinal {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.carinha-sinal .icone { width: 30px; height: 30px; }

.carinha.faixa-verde { background: var(--verde-claro); border-color: var(--verde); }
.carinha.faixa-verde .carinha-sinal { background: var(--verde); color: #fff; }
.carinha.faixa-amarela { background: var(--amarelo); border-color: #8A6A00; }
.carinha.faixa-amarela .carinha-sinal { background: var(--texto); color: var(--amarelo); }
.carinha.faixa-vermelha { background: var(--vermelho-claro); border-color: var(--vermelho); }
.carinha.faixa-vermelha .carinha-sinal { background: var(--vermelho); color: #fff; }

/* ------------------------------------------------------------------ aviso */

.aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vao);
  padding: 20px 16px;
  border-radius: var(--raio);
  border: 3px solid var(--contorno);
  background: var(--fundo);
  text-align: center;
  box-shadow: var(--sombra);
}

.aviso .desenho { --tam: 160px; }
.aviso-titulo { font-size: var(--letra-titulo); font-weight: 700; line-height: 1.15; }
.aviso-frase { font-size: var(--letra-base); line-height: 1.35; }
.aviso-botoes { display: flex; flex-direction: column; gap: var(--vao); width: 100%; margin-top: 4px; }

.aviso.cor-amarelo { background: var(--amarelo-claro); border-color: #8A6A00; }
.aviso.cor-vermelho { background: var(--vermelho-claro); border-color: var(--vermelho); }
.aviso.cor-verde { background: var(--verde-claro); border-color: var(--verde); }

/* ------------------------------------------------------------------ faixa TRABALHANDO (G13) */

.faixa-trabalhando {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 6px 14px 6px 8px;
  border: 3px solid var(--verde);
  border-radius: var(--raio-medio);
  background: var(--verde-claro);
  color: var(--texto);
  text-align: left;
  box-shadow: var(--sombra);
}

.faixa-trabalhando-relogio {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.faixa-trabalhando-relogio .desenho { --tam: 40px; }
.faixa-trabalhando-relogio .desenho img { filter: none; }

/* O "relógio girando": um anel que gira em volta do cronômetro. */
.faixa-trabalhando-relogio::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--verde);
  border-top-color: transparent;
  animation: girar 1.4s linear infinite;
}

/* O bloco do nome ocupa o resto da faixa e tem três peças: a palavra (TRABALHANDO ou PARADO)
 * numa linha só dela, e embaixo o nome e o tempo. O tempo agora é "1 h 23 min", bem mais largo
 * que o "1:23" de antes, e na faixa de 360px nome e tempo juntos nem sempre cabem: cabendo,
 * ficam na mesma linha (o tempo à direita); senão o tempo desce para uma linha própria e a faixa
 * cresce um pouco, em vez de uma peça passar por cima da outra. É o quebrar do flex, que mede a
 * faixa e não a janela. */
.faixa-trabalhando-nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  font-size: var(--letra-base);
  font-weight: 700;
  line-height: 1.1;
}
/* bloco: o caber_palavras mede só bloco (nome comprido encolhe, não quebra) */
.faixa-trabalhando-cliente { display: block; flex: 0 1 auto; min-width: 0; }
.faixa-trabalhando-nome small {
  display: block;
  flex: 0 0 100%;
  font-size: var(--letra-minima);
  font-weight: 700;
  color: var(--verde);
}

.faixa-trabalhando-tempo {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 1.5rem;   /* 24px: cabe com o nome na faixa de 360px; era 28px quando o tempo era "1:23" */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.faixa-trabalhando.pausado { background: var(--amarelo); border-color: #8A6A00; }
.faixa-trabalhando.pausado .faixa-trabalhando-relogio::after { animation: none; border-color: var(--texto); }
.faixa-trabalhando.pausado .faixa-trabalhando-nome small { color: var(--texto); }

/* ------------------------------------------------------------------ faixa DESFAZER */

/* Aparece 10s embaixo da tela depois de apagar algo. Escura para destacar do resto. */
.faixa-desfazer {
  position: fixed;
  left: 50%;
  bottom: calc(var(--margem) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(calc(var(--largura-maxima) - 2 * var(--margem)), calc(100% - 2 * var(--margem)));
  padding: 8px 8px 8px 18px;
  border-radius: var(--raio);
  background: var(--texto);
  color: #fff;
  box-shadow: var(--sombra-forte);
  transform: translateX(-50%);
  animation: subir .2s ease-out;
}

.faixa-desfazer-frase { flex: 1 1 auto; min-width: 0; font-size: var(--letra-base); font-weight: 700; }

.faixa-desfazer .botao-desfazer {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: var(--toque);
  padding: 0 16px;
  border-radius: var(--raio-medio);
  background: var(--amarelo);
  color: var(--texto);
  font-size: var(--letra-minima);
  font-weight: 700;
  text-transform: uppercase;
}
.faixa-desfazer .botao-desfazer .icone { flex: 0 0 auto; width: 30px; height: 30px; }
/* Em celular estreito (360 a 412 px) a faixa só tem lugar para a frase e a palavra: o desenho do
 * "desfazer" encolhia até virar um ponto ou fazia a frase quebrar em 3 linhas. A palavra
 * DESFAZER continua, no botão amarelo. */
@media (max-width: 420px) {
  .faixa-desfazer .botao-desfazer .icone { display: none; }
}

/* ------------------------------------------------------------------ carregando (G10) */

.carregando {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1 0 auto;
  padding: 24px 0;
}
/* Até 300ms não aparece nada (G10): o .aparecer entra depois. */
.carregando:not(.aparecer) { visibility: hidden; }
.carregando .desenho { --tam: 160px; }

.carregando-barra {
  position: relative;
  width: 100%;
  height: 28px;
  border-radius: 14px;
  border: 3px solid var(--verde);
  background: var(--verde-claro);
  overflow: hidden;
}

.carregando-barra::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progresso, 35%);
  background: var(--verde);
  border-radius: 10px;
  transition: width .3s ease;
}

.carregando-barra.sem-medida::after {
  animation: vai-e-vem 1.4s ease-in-out infinite;
}

/* ------------------------------------------------------------------ peças soltas */

/* Cartão branco comum (linha de lista, detalhe). */
.cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 3px solid var(--contorno);
  border-radius: var(--raio);
  background: var(--fundo);
  box-shadow: var(--sombra);
}

.pilha { display: flex; flex-direction: column; gap: var(--vao); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vao); }
.centro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cresce { flex: 1 1 auto; min-width: 0; }

/* T32 riscar no mapa (telas/mapa.js monta dentro do .corpo-mapa; o próprio mapa
 * já vai de borda a borda). A tela tem a altura exata da janela e o mapa fica com o
 * que sobra embaixo da barra e da faixa TRABALHANDO (quando há): a conta de altura
 * do telas/mapa.js não sabe da faixa nem do título e a página rolava. */
.tela.tela-mapa { gap: 0; height: calc(100vh - var(--reserva-desfazer, 0px)); height: calc(100dvh - var(--reserva-desfazer, 0px)); min-height: 0; }
.tela.tela-mapa > .faixa-trabalhando { margin-bottom: var(--vao); }
.corpo.corpo-mapa { flex: 1 1 auto; min-height: 0; }
.tela.tela-mapa .corpo-mapa > .tm { flex: 1 1 auto; height: auto; min-height: 380px; }

/* ------------------------------------------------------------------ animações */

@keyframes pulsar {
  0% { transform: scale(.92); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes piscar { 50% { opacity: 0; } }
@keyframes subir { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes vai-e-vem {
  0% { left: -35%; }
  100% { left: 100%; }
}

/* Mostra a tela nova com uma entrada curta: o olho percebe que mudou de pergunta. */
.tela.entrando { animation: entrar .18s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* caber_na_largura(..., { quebrar: true }): nem na letra mínima coube numa linha, então quebra entre os pedaços */
.nao-coube { white-space: normal !important; }

/* CASINHA da barra: volta à tela inicial de qualquer tela (pedido do Rafael, 12/10). Verde cheio para
   não ser confundida com o VOLTAR (contorno). Em tela estreita a barra aperta a trilha para caberem os três. */
.botao-inicio {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border: 3px solid var(--verde);
  border-radius: var(--raio-medio);
  background: var(--verde);
  color: #fff;
  box-shadow: var(--sombra);
}
.botao-inicio .icone { width: 38px; height: 38px; }
@media (max-width: 400px) {
  .barra { gap: 6px; }
  .trilha { gap: 3px; }
  .trilha-bolinha { min-width: 10px; }
  .trilha-bolinha.atual { flex-basis: 36px; }
  .trilha-bolinha.atual .desenho { --tam: 26px; }
}