/* Termômetro público — item 5.2 do blueprint.
   Um número dominante por tela. Semáforo verde/amarelo/vermelho. Modo escuro
   por token desde o primeiro dia, porque é barato agora e caro como retrofit.
   Zero biblioteca: o alvo de bundle é < 200 KB e aqui isso significa zero. */

:root {
  color-scheme: light dark;

  --fundo: #f6f6f4;
  --superficie: #ffffff;
  --borda: #e3e2dd;
  --texto: #16181d;
  --texto-fraco: #6b6f76;
  --acento: #14603f;
  --acento-texto: #ffffff;

  --verde: #14803c;
  --verde-fraco: #e6f4ea;
  --amarelo: #9a6700;
  --amarelo-fraco: #fdf3d6;
  --vermelho: #b3261e;
  --vermelho-fraco: #fbe9e7;

  --raio: 14px;
  --sombra: 0 1px 2px rgba(16, 18, 22, .06), 0 8px 24px rgba(16, 18, 22, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #101215;
    --superficie: #181b20;
    --borda: #272b32;
    --texto: #f1f2f4;
    --texto-fraco: #9aa1ab;
    --acento: #2f9e6b;
    --acento-texto: #0b0d10;

    --verde: #4ade80;
    --verde-fraco: #12271b;
    --amarelo: #fbbf24;
    --amarelo-fraco: #2a2113;
    --vermelho: #f87171;
    --vermelho-fraco: #2b1616;

    --sombra: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 560px; margin: 0 auto; }

/* ------------------------------------------------------------------ topo */
.topo { padding: 24px 4px 8px; }

.marca {
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--texto-fraco);
}

h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 7vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.linha-fina { margin: 0; color: var(--texto-fraco); }

/* --------------------------------------------------------------- cartões */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 24px;
  margin-top: 20px;
}

.campo { margin-bottom: 20px; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

input {
  width: 100%;
  padding: 13px 14px;
  font-size: 17px;
  font-family: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 10px;
}

input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.entrada-dinheiro { position: relative; }

.entrada-dinheiro span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-fraco);
  font-size: 17px;
}

.entrada-dinheiro input { padding-left: 42px; }

.ajuda {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--texto-fraco);
}

button {
  width: 100%;
  padding: 15px 20px;
  font: 600 17px/1 inherit;
  color: var(--acento-texto);
  background: var(--acento);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

button:hover { filter: brightness(1.08); }
button:disabled { opacity: .6; cursor: progress; }

.erro {
  margin: 12px 0 0;
  color: var(--vermelho);
  font-size: 14px;
}

/* ------------------------------------------------------------- resultado */
.rotulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* O número dominante. Se algum dia dois números brigarem por esta posição,
   um dos dois está na tela errada. */
.numerao {
  margin: 10px 0 12px;
  font-size: clamp(56px, 17vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cor-semaforo, var(--texto));
  font-variant-numeric: tabular-nums;
}

.barra {
  height: 12px;
  background: var(--borda);
  border-radius: 99px;
  overflow: hidden;
}

.barra-preenchida {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--cor-semaforo, var(--acento));
  transition: width .5s ease-out;
}

.sob-barra {
  margin: 10px 0 0;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.resumo {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: 600;
}

.grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
}

.grade .valor {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grade .ajuda { margin-top: 2px; }

.aviso,
.consequencia {
  margin: 20px 0 0;
  padding: 16px;
  border-radius: 10px;
  border-left: 3px solid;
}

.aviso {
  background: var(--amarelo-fraco);
  border-color: var(--amarelo);
  font-size: 15px;
}

/* O bloco que vende: é ele que transforma "68%" em uma decisão.
   Ele carrega o próprio `data-semaforo`, vindo da situação *projetada*: o
   número pode estar verde hoje e a projeção, vermelha. */
.consequencia {
  background: var(--cor-semaforo-fraca, var(--verde-fraco));
  border-color: var(--cor-semaforo, var(--verde));
  font-size: 16px;
}

[data-semaforo="verde"]    { --cor-semaforo: var(--verde);    --cor-semaforo-fraca: var(--verde-fraco); }
[data-semaforo="amarelo"]  { --cor-semaforo: var(--amarelo);  --cor-semaforo-fraca: var(--amarelo-fraco); }
[data-semaforo="vermelho"] { --cor-semaforo: var(--vermelho); --cor-semaforo-fraca: var(--vermelho-fraco); }

/* --------------------------------------------------------------- captura */
.captura h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.01em; }
.captura > p { margin: 0 0 20px; color: var(--texto-fraco); }

.linha { display: flex; gap: 10px; flex-wrap: wrap; }
.linha input { flex: 1 1 200px; }
.linha button { width: auto; flex: 0 0 auto; }

.obrigado {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--verde);
}

/* --------------------------------------------------------------- rodapé */
footer { margin-top: 28px; padding: 0 4px; }

.disclaimer {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-fraco);
}

.versao {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--texto-fraco);
  opacity: .7;
}

@media (max-width: 420px) {
  .grade { grid-template-columns: 1fr; }
  .linha button { width: 100%; }
}