/* ============================================================
   Clubinho das Manas — aparência da página
   Tons neutros: off-white, rosa, azul bebê e verde oliva.
   ============================================================ */

:root {
  --fundo: #fbf7f3;
  --cartao: #ffffff;
  --rosa: #e8c4c4;
  --rosa-escuro: #b76e79;
  --texto: #5a3a3e;
  --texto-suave: #8f7276;
  --azul-bebe: #dce9f2;
  --oliva: #7a8450;
  --borda: #ecdcd6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: 16px;
}

.topo { text-align: center; padding: 24px 16px 8px; }
.topo h1 {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: 40px;
  color: var(--rosa-escuro);
  margin: 0;
}
.topo p { margin: 0; color: var(--texto-suave); letter-spacing: 1px; }

main { max-width: 560px; margin: 0 auto; padding: 8px 16px 40px; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 16px;
  margin-top: 16px;
}

label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
label:first-child { margin-top: 0; }

input, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fffdfb;
}
input:focus, textarea:focus { outline: 2px solid var(--rosa); border-color: var(--rosa-escuro); }
textarea { resize: vertical; }

button {
  font: inherit;
  font-weight: 600;
  color: var(--texto);
  background: var(--azul-bebe);
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.6; cursor: wait; }
button.principal { background: var(--rosa-escuro); color: #fff; }

#botao-buscar { width: 100%; margin-top: 12px; }

.status { margin: 10px 0 0; font-size: 14px; min-height: 1em; }
.status.erro { color: #a33b3b; }

#foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--fundo);
  border-radius: 12px;
}

.infos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.infos li {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
}
.infos li.comissao { background: #eef0e3; border-color: #d7dbc0; color: #4b522c; }

.linha { display: flex; gap: 8px; }
.linha button { padding: 0 16px; font-size: 20px; }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.dica { font-size: 13px; color: var(--texto-suave); margin: 6px 0 0; }
.dica button { padding: 4px 10px; font-size: 13px; margin-left: 4px; }

.botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.botoes .principal { grid-column: 1 / -1; }

.aviso {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  max-width: 90%;
  text-align: center;
}