/* AQUI É TRABALHO
   ---------------------------------------------------------------------------
   Quem usa isto é peão, no pasto, no sol, com a mão suja e o celular na outra.
   Daí as escolhas: fonte grande, alvo de toque grande (campo e botão com 52px
   de altura, e nada clicável abaixo de 44), contraste alto, uma coluna no
   celular e pouca coisa por tela.
   Bonito aqui é ser legível de primeira, não ser delicado. */

:root {
  --fundo: #14110e;
  --fundo-2: #1e1a16;
  --fundo-3: #2a251e;
  --borda: #3c3428;
  --borda-forte: #574a36;
  --texto: #f2ece2;
  --texto-2: #a89d8d;
  --destaque: #e0c179;
  --bom: #8ec96f;
  --bom-fundo: #1a2413;
  --ruim: #e2705f;
  --ruim-fundo: #2a1613;
  --raio: 8px;
  --toque: 52px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 800; }
h2 { font-size: 1.5rem; letter-spacing: 0.01em; }

/* Título de seção: explica em vez de rotular. */
h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--texto);
  margin-bottom: 0.15rem;
}

.explica {
  color: var(--texto-2);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

a { color: var(--destaque); }

.oculto { display: none !important; }

/* --- cabeçalho --- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fundo-2);
  border-bottom: 2px solid var(--borda);
}

.topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem 0.6rem;
  max-width: 1000px;
  margin: 0 auto;
}

.marca {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--destaque);
  white-space: nowrap;
}

.topo .quem { margin-left: auto; color: var(--texto-2); font-size: 0.9rem; text-align: right; }

nav {
  display: flex;
  gap: 0.4rem;
  padding: 0 1rem 0.6rem;
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }

nav a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 46px;
  padding: 0 1rem;
  border-radius: var(--raio);
  color: var(--texto-2);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  border: 2px solid transparent;
}
nav a.ativo {
  background: var(--fundo-3);
  color: var(--destaque);
  border-color: var(--borda-forte);
}

main { max-width: 1000px; margin: 0 auto; padding: 1.2rem 1rem 5rem; }

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

/* 250px não é chute: é o que cabe "R$ 171.830,00" inteiro no corpo de 1,85rem
   sem quebrar. Valor de seis dígitos é o normal aqui — um lote de 33 cabeças
   já passa de cem mil. */
.painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.cartao {
  background: var(--fundo-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem 1.1rem;
}

.cartao .rotulo {
  font-size: 0.9rem;
  color: var(--texto-2);
  font-weight: 600;
}

.cartao .valor {
  font-size: 1.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
  line-height: 1.1;
}

.cartao .nota { font-size: 0.9rem; color: var(--texto-2); margin-top: 0.3rem; }

.cartao.principal { border-color: var(--borda-forte); background: var(--fundo-3); }
.cartao.principal .valor { color: var(--destaque); font-size: 2.4rem; }

.bom { color: var(--bom); }
.ruim { color: var(--ruim); }

/* Precisa vir depois e com o mesmo peso de `.cartao.principal .valor`, senão o
   dourado engole o verde e o vermelho justo no cartão onde saber se está bom
   ou ruim é o que importa. */
.cartao .valor.bom { color: var(--bom); }
.cartao .valor.ruim { color: var(--ruim); }

/* O veredito de vender ou segurar: é a decisão que o sistema existe para dar,
   então é a coisa mais alta da tela. */
.veredito {
  border: 2px solid;
  border-radius: var(--raio);
  padding: 1.2rem;
  margin-bottom: 1.6rem;
}
.veredito.sim { border-color: var(--bom); background: var(--bom-fundo); }
.veredito.nao { border-color: var(--ruim); background: var(--ruim-fundo); }
.veredito .frase { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.veredito.sim .frase { color: var(--bom); }
.veredito.nao .frase { color: var(--ruim); }
.veredito .conta { color: var(--texto-2); margin-top: 0.5rem; font-size: 0.95rem; }

/* --- blocos, listas, tabelas --- */

.bloco {
  background: var(--fundo-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.1rem;
  margin-bottom: 1.1rem;
}

.rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 1rem; }

th, td {
  text-align: left;
  padding: 0.7rem 0.7rem 0.7rem 0;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

th { font-size: 0.85rem; color: var(--texto-2); font-weight: 700; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0.7rem; }
tbody tr:last-child td { border-bottom: none; }

.vazio { color: var(--texto-2); font-size: 0.95rem; padding: 0.5rem 0; }

.lote-linha {
  display: block;
  padding: 1.1rem;
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 0.8rem;
  text-decoration: none;
  color: inherit;
  background: var(--fundo-2);
}
.lote-linha .nome { font-weight: 800; font-size: 1.2rem; }
.lote-linha .resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-top: 0.5rem;
  font-size: 0.98rem;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.etiqueta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--fundo-3);
  color: var(--texto-2);
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* --- animais --- */

.animais {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
}

.animal {
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--fundo);
}

.animal .retrato {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--fundo-3);
  border: none;
  cursor: pointer;
  color: var(--texto-2);
  font: inherit;
  font-size: 0.95rem;
}

.animal .dados { padding: 0.6rem 0.7rem 0.7rem; }
.animal .brinco { font-weight: 800; font-size: 1.15rem; }
.animal .detalhe { color: var(--texto-2); font-size: 0.9rem; }
.animal .botoes { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.animal .botoes button { flex: 1; }

/* --- formulários --- */

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
}

label { display: block; font-size: 0.95rem; color: var(--texto-2); margin-bottom: 0.3rem; font-weight: 600; }

input, select, textarea {
  width: 100%;
  min-height: var(--toque);
  padding: 0.6rem 0.75rem;
  background: var(--fundo);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
  /* 17px ou mais: abaixo disso o iPhone dá zoom sozinho ao tocar no campo. */
  font-size: 1.05rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--destaque);
}

button {
  min-height: var(--toque);
  padding: 0.6rem 1.4rem;
  background: var(--destaque);
  color: #14110e;
  border: 2px solid var(--destaque);
  border-radius: var(--raio);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; }

button.discreto {
  background: transparent;
  color: var(--texto-2);
  border-color: var(--borda);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
}

button.perigo { background: transparent; color: var(--ruim); border-color: var(--ruim); }

.acoes { margin-top: 1.1rem; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }

/* A conta feita na hora, embaixo do formulário: quem digita vê o que o sistema
   entendeu antes de salvar. */
.derivado {
  font-size: 1rem;
  color: var(--destaque);
  font-variant-numeric: tabular-nums;
  flex: 1 1 260px;
}

/* --- abas --- */

.abas { display: flex; gap: 0.4rem; margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button {
  background: var(--fundo-2);
  color: var(--texto-2);
  border-color: var(--borda);
  font-weight: 600;
  white-space: nowrap;
  padding: 0.5rem 1rem;
}
.abas button.ativo {
  background: var(--fundo-3);
  color: var(--destaque);
  border-color: var(--borda-forte);
  font-weight: 800;
}

/* --- avisos --- */

.aviso {
  padding: 0.9rem 1rem;
  border-radius: var(--raio);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid;
}
.aviso.erro { background: var(--ruim-fundo); border-color: var(--ruim); color: #f5b9ae; }
.aviso.ok { background: var(--bom-fundo); border-color: var(--bom); color: #c8e7b4; }

/* --- link de convite --- */

.convite-link {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}
.convite-link input { font-family: ui-monospace, monospace; font-size: 0.9rem; flex: 1 1 260px; }

/* --- entrar e aceitar convite --- */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.entrada .caixa { width: 100%; max-width: 380px; }
.entrada .marca { font-size: 1.9rem; display: block; margin-bottom: 0.4rem; }
.entrada p.sub { color: var(--texto-2); margin: 0 0 1.8rem; }
.entrada .campos { grid-template-columns: 1fr; }
.entrada button[type="submit"] { width: 100%; margin-top: 1.2rem; }
.entrada .rodape { margin-top: 1.5rem; color: var(--texto-2); font-size: 0.92rem; }

@media (max-width: 560px) {
  .painel { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .cartao .valor { font-size: 1.9rem; }
  .cartao.principal .valor { font-size: 2.2rem; }
  .veredito .frase { font-size: 1.35rem; }
  main { padding: 1rem 0.9rem 4rem; }
}