/* Jardim — tokens */
:root {
  --papel: #F4F7EF;
  --cartao: #FFFFFF;
  --tinta: #24301F;
  --musgo: #5C724F;
  --folha: #3A5A34;
  --folha-escura: #2C4527;
  --orquidea: #A84C86;
  --linha: #DCE3D0;
  --perigo: #A3402F;
  --serif: "Fraunces", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }

/* hidden SEMPRE esconde, mesmo com display próprio (lição de 11/08) */
[hidden] { display: none !important; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
}
/* no Jardim a bandeja já vai até as abas: o respiro extra sobraria e
   criaria rolagem à toa (19/08) */
main.main-tela-cheia { padding-bottom: 0.5rem; }

/* abas de navegação (Jardim | Descoberta) */
.abas {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  background: var(--cartao);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}
.abas {
  padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
  gap: 0.2rem;
  align-items: flex-end;
}
.aba {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0 0.3rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--musgo);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.aba > span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aba-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 28px;
  border-radius: 10px;
}
/* seleção cobre o elemento inteiro — ícone + texto (Pedro, 14/08) */
.aba.ativa {
  color: var(--folha-escura);
  background: #EAF0E1;
  border-radius: 12px;
}
.aba.ativa .aba-icone { color: var(--folha); }
.aba-anel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--cartao);
  border: 2px solid var(--folha);
  color: var(--folha-escura);
  box-shadow: 0 3px 10px rgb(36 48 31 / 0.18);
}
.aba-camera:active .aba-anel { background: #EAF0E1; }

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

/* HUD do jardineiro (fixo no topo — clone claro da referência) */
.hud {
  position: sticky;
  top: 0;
  z-index: 44;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(0.6rem + env(safe-area-inset-top)) 0.8rem 0.55rem;
  background: var(--cartao);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 2px 10px rgb(36 48 31 / 0.06);
}
.hud-linha1 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.hud-prog { flex: 1; min-width: 0; }
.hud-prog-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.hud-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--folha-escura);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-pontos {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--musgo);
  letter-spacing: 0.02em;
}
.hud-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #8A6420;
  background: #FBEFD4;
  border: 1px solid #E8CE93;
  border-radius: 999px;
  padding: 0.24rem 0.55rem;
  text-decoration: none;
  white-space: nowrap;
}
.hud-redondo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--linha);
  text-decoration: none;
  font-size: 0.95rem;
  flex: 0 0 auto;
}
.hud-linha2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  background: #EFF3E7;
  border-radius: 10px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  color: var(--tinta);
}
.hud-l2-esq {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.hud-l2-esq strong { font-weight: 700; }
.hud-l2-esq span { color: var(--musgo); }
.hud-l2-dir {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
}
.hud-l2-dir span { color: var(--folha); font-weight: 600; }
.hud-nivel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #5A7F52, var(--folha-escura));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border: 2px solid #EAF0E1;
  outline: 1px solid var(--linha);
  box-shadow: 0 2px 6px rgb(36 48 31 / 0.25);
  flex: 0 0 auto;
}
.hud-nome strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--folha-escura);
  line-height: 1.15;
  margin-right: 0.4rem;
}
.hud-nome small {
  font-size: 0.75rem;
  color: var(--musgo);
}
.hud-etapas {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.3rem;
  min-width: 0;
}
.etapa {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--linha);
  flex: 0 0 auto;
}
.etapa.feita { background: var(--folha); }
.hud-etapas small {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  color: var(--musgo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-lado {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-self: end;
}
.hud-chip {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--folha-escura);
  background: #EAF0E1;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
.hud-status {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--musgo);
}
.hud-menu {
  position: absolute;
  top: calc(100% - 0.3rem);
  left: 0.8rem;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(36 48 31 / 0.18);
  padding: 0.4rem;
  min-width: 11rem;
  z-index: 45;
}
.hud-menu-titulo {
  display: block;
  font-size: 0.75rem;
  color: var(--musgo);
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 0.25rem;
}
.hud-menu a {
  display: block;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tinta);
  font-size: 0.92rem;
}
.hud-menu a:active { background: var(--papel); }

/* cabeçalho de página */
.cabeca { margin: 1.2rem 0 1rem; }
/* rente ao header, no ritmo do Jardim (ficha da planta) */
.cabeca-rente { margin-top: 0.2rem; }
.titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--folha-escura);
}
.subtitulo { color: var(--musgo); font-size: 0.9rem; margin-top: 0.2rem; }
.voltar {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--musgo);
  text-decoration: none;
  margin-bottom: 0.4rem;
}
.especie {
  font-family: var(--serif);
  font-style: italic;
  color: var(--orquidea);
  margin-top: 0.15rem;
}
.local { color: var(--musgo); font-size: 0.9rem; margin-top: 0.3rem; }

/* grade do jardim */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
}
.carta {
  display: block;
  position: relative;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgb(36 48 31 / 0.06);
}
.carta img, .sem-foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: #EAF0E1;
}
.etiqueta {
  display: block;
  padding: 0.55rem 0.7rem 0.65rem;
  border-top: 3px solid var(--folha);
}
.etiqueta strong { display: block; font-size: 0.95rem; }
.etiqueta em {
  display: block;
  font-family: var(--serif);
  font-size: 0.8rem;
  color: var(--orquidea);
}

/* estado vazio */
.vazio {
  text-align: center;
  color: var(--musgo);
  font-family: var(--serif);
  font-size: 1.1rem;
  padding: 3rem 1rem;
}

/* cartões e formulários */
.cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 1rem;
  margin: 1.1rem 0;
}
.form-empilhado label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--musgo);
  margin-bottom: 0.8rem;
}
.dica-campo { font-weight: 400; color: #8A9880; }
.form-empilhado input, .form-empilhado textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
}
.form-empilhado input:focus, .form-empilhado textarea:focus {
  outline: 2px solid var(--folha);
  outline-offset: 1px;
}
.form-empilhado input[type="file"] { padding: 0.45rem; }

/* plantação: câmera, roteiro e nome sugerido */
.foto-oculta {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
body.sem-scroll { overflow: hidden; }
.tomada {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  flex-direction: column;
}
.tomada[hidden] { display: none; }
.tomada video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.flash.pisca { animation: pisca 0.25s ease-out; }
@keyframes pisca {
  from { opacity: 0.7; }
  to { opacity: 0; }
}
.tomada-topo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: calc(0.5rem + env(safe-area-inset-top)) 0.7rem 0.9rem;
  background: linear-gradient(rgb(0 0 0 / 0.55), transparent);
}
.fechar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 0.16);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.tomada-dica {
  color: rgb(255 255 255 / 0.95);
  font-size: 0.85rem;
  background: rgb(0 0 0 / 0.35);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
.tomada-base {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / 0.65));
}
.guia {
  width: fit-content;
  max-width: 90%;
  margin: 0 auto 0.8rem;
  text-align: center;
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  background: rgb(0 0 0 / 0.4);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
}
.tira-miniaturas {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin-bottom: 0.7rem;
  min-height: 0;
  padding-top: 8px;
}
.mini {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
}
.mini img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgb(255 255 255 / 0.85);
  display: block;
}
.mini-x {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.75);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.miniaturas .mini img {
  border-color: var(--linha);
  width: 64px;
  height: 64px;
}
.miniaturas .mini-x { background: rgb(36 48 31 / 0.85); }
.controles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.ctrl-galeria {
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: rgb(255 255 255 / 0.9);
  font-size: 0.68rem;
  background: rgb(255 255 255 / 0.16);
  border-radius: 14px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
.disparo {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 5px solid #fff;
  background: rgb(255 255 255 / 0.25);
  box-shadow: 0 0 0 5px rgb(0 0 0 / 0.25);
  cursor: pointer;
  position: relative;
}
.disparo::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
  transition: transform 0.1s;
}
.disparo:active::after { transform: scale(0.85); }
.pronto {
  justify-self: end;
  border: 0;
  background: var(--folha);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}
.foto-capa[hidden] { display: none; }
.foto-capa {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--linha);
  box-shadow: 0 2px 10px rgb(36 48 31 / 0.12);
  display: block;
}
/* fontes da ficha curada — o Pedro aprovou exibir (25/08) */
.fontes-ficha {
  margin: -0.4rem 0.2rem 1rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--musgo);
}

/* origem dos cuidados na ficha da planta (18/08) */
.fonte-cuidados {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--musgo);
}
.fonte-cuidados a { color: var(--folha); }

/* ajuda de localização exata no porteiro do avistamento (17/08) */
.diagnostico {
  font-weight: 600;
  color: var(--folha-escura);
}
.ajuda-gps {
  width: 100%;
  max-width: 22rem;
  margin: 1rem auto 0.4rem;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 14px;
}
.ajuda-gps > summary {
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--folha);
  cursor: pointer;
}
.ajuda-passos { padding: 0 0.9rem; }
.ajuda-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 0.3rem;
}
.ajuda-gps ol {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--musgo);
}
.ajuda-gps li { margin-bottom: 0.45rem; }
.ajuda-gps li strong { color: var(--tinta); }
.ajuda-nota {
  padding: 0 0.9rem 0.8rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--musgo);
}

/* ---------- outras candidatas do Pl@ntNet (19/08) ---------- */
.outras-especies {
  margin-top: 0.8rem;
  font-size: 0.88rem;
}
.outras-especies > summary {
  color: var(--folha);
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}
.rever-id { margin-top: 0.5rem; }

/* trocar a própria senha: fechado por padrão, abre quando se quer (26/08) */
.abre-fecha > summary {
  color: var(--folha);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.25rem 0;
}
.form-senha { margin-top: 0.6rem; }
.lista-candidatas {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: grid;
  gap: 0.4rem;
}
.candidata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font: inherit;
  text-align: left;
  color: var(--tinta);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 12px;
  cursor: pointer;
}
.candidata span:first-child { display: grid; min-width: 0; }
.candidata strong { font-size: 0.9rem; }
.candidata em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--orquidea);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.candidata-pct {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--musgo);
  flex: 0 0 auto;
}
.candidata-atual {
  border-color: var(--folha);
  background: #F2F7EC;
}
.candidata-atual::after { content: " ✓"; color: var(--folha); }

/* ---------- boas-vindas do primeiro acesso (19/08) ---------- */
.bv { padding: 0.5rem 0 2rem; }
.bv-tela {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
  animation: bv-entra 0.35s ease;
}
@keyframes bv-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.bv-emoji { font-size: 2.6rem; line-height: 1; margin-top: 1rem; }
.bv-titulo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--folha-escura);
}
.bv-texto {
  max-width: 21rem;
  color: var(--tinta);
  line-height: 1.55;
}
.bv-nota {
  max-width: 21rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--musgo);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 14px;
  line-height: 1.5;
}
.bv .botao, .bv-form { width: 100%; max-width: 21rem; }
.bv .botao { margin-top: 0.4rem; text-align: center; }
.bv-form { padding: 0; }
.bv-erro { color: var(--perigo); font-size: 0.85rem; }
.bv-prancha {
  width: 11rem;
  padding: 0.7rem;
  background: #FDFBF4;
  border: 1px solid #E8E4D4;
  border-radius: 18px;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  position: relative;
}
.bv-prancha .prancha-foto {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #EAF0E1;
}
.bv-prancha img { width: 100%; height: 100%; object-fit: cover; }
.bv-prancha strong { font-family: var(--serif); font-size: 0.95rem; }
.bv-prancha em { font-size: 0.8rem; color: var(--orquidea); }
.bv-prancha-exemplo { border-style: dashed; opacity: 0.85; }
.bv-passos {
  max-width: 21rem;
  margin: 0;
  padding-left: 1.2rem;
  text-align: left;
  color: var(--tinta);
  line-height: 1.5;
}
.bv-passos li { margin-bottom: 0.5rem; }
.bv .cartao.form-empilhado { text-align: left; }

/* ---------- horta: espaço com ferramentas próprias (19/08) ---------- */
.selo-horta { font-size: 0.9rem; }
.cinto-horta .ferramenta { padding-left: 0.1rem; padding-right: 0.1rem; }
.cinto-horta .ferramenta span { font-size: 0.62rem; }
.bandeja-nova-titulo {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--folha-escura);
  margin-bottom: 0.2rem;
}
.escolha-tipo {
  display: grid;
  /* 3 tipos desde 25/08 (jardim, horta, berçário) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.3rem;
}
.opcao-tipo {
  /* relative é obrigatório: o input escondido é absolute e, sem âncora,
     escapa do recorte do carrossel e estica a página (bug de 19/08) */
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.7rem 0.4rem;
  text-align: center;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 14px;
  cursor: pointer;
}
.opcao-tipo.ativa {
  border-color: var(--folha);
  box-shadow: 0 0 0 1px var(--folha);
  background: #F2F7EC;
}
.opcao-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-emoji { font-size: 1.4rem; }
.opcao-tipo strong { font-size: 0.82rem; color: var(--tinta); }
.opcao-tipo small { font-size: 0.63rem; color: var(--musgo); line-height: 1.2; }

/* ---------- jardim compartilhado (17/08) ---------- */
.convite {
  border-style: dashed;
  border-color: #C6D2B4;
  margin-bottom: 0.9rem;
}
.convite .dica { margin-top: 0.3rem; }
.convite-acoes {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.8rem;
}
.selo-compartilhado { font-size: 0.85rem; }
.bandeja-local {
  margin: 0;
  font-size: 0.78rem;
  color: var(--musgo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assinatura {
  color: var(--musgo);
  font-size: 0.8rem;
  font-style: italic;
}
.lista-jardineiros .quando { white-space: nowrap; }
.convite-pendente {
  color: var(--musgo);
  font-size: 0.78rem;
  font-style: italic;
}
.form-convite { margin-top: 1rem; }

/* ---------- painel do admin (jardim-admin.celo.stream) ---------- */
.corpo-admin { background: var(--papel); }
.admin-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.7rem;
  background: var(--folha-escura);
  color: #F4F7EF;
}
.admin-marca { font-family: var(--serif); font-weight: 600; }
.admin-topo .acao-quieta { color: #C9D8BE; }
.admin-abas {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 1rem 0;
  max-width: 720px;
  margin: 0 auto;
}
.admin-aba {
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--musgo);
  text-decoration: none;
  border-radius: 999px;
}
.admin-aba.ativa { color: var(--folha-escura); background: #EAF0E1; }
.admin-badge {
  display: inline-block;
  min-width: 1.15rem;
  padding: 0 0.3rem;
  font-size: 0.72rem;
  text-align: center;
  color: #fff;
  background: var(--perigo);
  border-radius: 999px;
}
.admin-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}
.admin-titulo {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--folha-escura);
}
.admin-sub { color: var(--musgo); font-size: 0.85rem; margin-top: 0.15rem; }
.admin-secao {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--musgo);
  margin-top: 1.8rem;
}
.admin-lista { list-style: none; padding: 0; margin: 1rem 0 0; }
.admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.6rem;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 14px;
}
.admin-lista-fraca .admin-item { opacity: 0.6; }
.admin-item-info { display: grid; gap: 0.1rem; min-width: 0; }
.admin-user { font-size: 0.85rem; color: var(--orquidea); }
.admin-quando { font-size: 0.78rem; color: var(--musgo); }
.admin-visto { font-size: 0.75rem; color: var(--musgo); }
.admin-item-acoes { display: flex; align-items: center; gap: 0.7rem; }
.botao-mini { padding: 0.4rem 0.9rem; font-size: 0.85rem; width: auto; }
.admin-vazio {
  margin-top: 1.5rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--musgo);
  border: 1px dashed var(--linha);
  border-radius: 16px;
}
.entrada-link { display: inline-block; margin-top: 1rem; }
.entrada-botao { margin-top: 1rem; }

/* aviso de posição aproximada no mapa */
.aviso-precisao {
  position: fixed;
  top: calc(var(--hud-h, 3.5rem) + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  color: var(--tinta);
  background: rgb(253 251 244 / 0.94);
  border: 1px solid var(--linha);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(36 48 31 / 0.15);
  white-space: nowrap;
}

/* espécie identificada com ficha em curadoria */
.cartao.pesquisando {
  border-style: dashed;
  text-align: center;
}
.cartao.pesquisando .dica { margin-top: 0.3rem; }

.figura-especie { margin: 0; }
.credito-foto {
  color: var(--musgo);
  font-size: 0.72rem;
  margin-top: 0.35rem;
  text-align: right;
}
.miniaturas {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  margin: 0.8rem 0 0.4rem;
  padding-top: 7px;
}
.acoes-plantio {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}
.botao-fotos { margin: 0.4rem 0 1rem; }
.botao:disabled { opacity: 0.45; cursor: default; }
.campo-nome {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.campo-nome input { flex: 1; margin-top: 0; }
.dado {
  flex: 0 0 auto;
  width: 3rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--cartao);
  font-size: 1.25rem;
  cursor: pointer;
}
.dado:active { background: #EAF0E1; }
.origem {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--musgo);
  min-height: 1.1em;
}

.botao {
  display: inline-block;
  width: 100%;
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--folha);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.botao:active { background: var(--folha-escura); }
.botao-suave { background: var(--musgo); }
.botao-novo { margin-top: 1.3rem; }

.acao-quieta {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0.7rem 0.5rem;
  margin: -0.4rem -0.5rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--musgo);
  text-decoration: underline;
  cursor: pointer;
}
.perigo { color: var(--perigo); }
/* editar/remover no topo da ficha, junto do nome (Pedro, 14/08) */
.cabeca-linha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cabeca-linha .titulo { flex: 1; min-width: 0; }
.ficha-acoes {
  display: flex;
  gap: 0.45rem;
  flex-shrink: 0;
}
.acao-icone {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  font: inherit;
  font-size: 1.05rem;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(36 48 31 / 0.08);
}

/* fotos */
.fotos {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-snap-type: x mandatory;
}
.foto {
  flex: 0 0 78%;
  max-width: 340px;
  scroll-snap-align: start;
}
.foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--linha);
  display: block;
}
.foto figcaption {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--musgo);
  margin-top: 0.25rem;
}
.excluir {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0.7rem 0.6rem;
  margin: -0.7rem -0.6rem;
  font-size: 0.78rem;
  color: var(--perigo);
  text-decoration: underline;
  cursor: pointer;
}
.anotacoes .excluir { font-size: 1rem; text-decoration: none; }

/* seções da ficha */
.secao {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--folha-escura);
  margin-bottom: 0.6rem;
}
.notas { white-space: pre-line; }
.anotacoes { list-style: none; padding: 0; margin-top: 0.9rem; }
.anotacoes li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linha);
}
.anotacoes .quando {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--musgo);
}
.anotacoes .texto { flex: 1; white-space: pre-line; }
.dica { color: var(--musgo); font-size: 0.9rem; margin-top: 0.8rem; }

/* avisos */
.avisos {
  background: #FBF3E4;
  border: 1px solid #E8D9B5;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
  font-size: 0.92rem;
}

/* guia de campo */
.secao-solta {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--folha-escura);
  margin: 1.7rem 0 0.8rem;
}
.linha-secao {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}
.almanaque {
  background: #FDFBF4;
  box-shadow: 0 4px 14px rgb(36 48 31 / 0.09);
  border-color: #E8E4D4;
  position: relative;
  overflow: hidden;
}
.alm-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.alm-estacao {
  font-family: var(--serif);
  font-style: italic;
  color: var(--musgo);
  margin-bottom: 0.5rem;
}
.alm-icone {
  font-size: 2.6rem;
  opacity: 0.35;
  line-height: 1;
}
.almanaque ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.almanaque li {
  padding: 0.45rem 0 0.45rem 1.3rem;
  position: relative;
  border-bottom: 1px solid #EEE9DA;
  font-size: 0.92rem;
}
.almanaque li:last-child { border-bottom: 0; }
.almanaque li::before {
  content: "❧";
  position: absolute;
  left: 0;
  color: var(--folha);
}

/* marcos (medalhas só-celebração) */
.marcos {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.marco {
  width: 5.4rem;
  text-align: center;
}
.marco-medalha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 0.35rem;
  font-size: 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #F4D68E, #C98A3D);
  border: 2px solid #B57F2E;
  box-shadow: 0 3px 8px rgb(160 110 40 / 0.35),
              inset 0 2px 3px rgb(255 255 255 / 0.55);
}
.marco strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.2;
}
.marco small {
  display: block;
  font-size: 0.68rem;
  color: var(--musgo);
  line-height: 1.25;
  margin-top: 0.1rem;
}

/* bloco grudado sob o HUD (cinto do Jardim, busca do Herbário) —
   sangra até as bordas pra rolagem passar por baixo sem vazar nos cantos */
.grudado {
  position: sticky;
  top: var(--hud-h, 0px);
  z-index: 30;
  background: var(--papel);
  /* cola no fundo do HUD já em repouso (anula o padding-top do main):
     posição parada = posição grudada, sem deslocamento ao rolar.
     O respiro visual vira padding interno, coberto pelo fundo. */
  margin: -1rem -1rem 0;
  padding: 1.2rem 1rem 0.55rem;
}
.grudado .cinto { margin: 0; }
.grudado .busca-herbario { margin: 0; }

/* busca do herbário — mora no lugar do título; topo alinhado com o Jardim */
.busca-herbario {
  display: block;
  width: 100%;
  margin: 0.2rem 0 0.9rem;
  padding: 0.65rem 0.9rem;
  font: inherit;
  color: var(--tinta);
  background: var(--cartao);
  border: 1px solid #E8E4D4;
  border-radius: 14px;
}
.busca-herbario:focus {
  outline: 2px solid var(--folha);
  outline-offset: 1px;
}
.busca-herbario::placeholder { color: #8A9880; }
.busca-vazia {
  color: var(--musgo);
  text-align: center;
  margin-top: 1.4rem;
}

/* pranchas de espécime (plantédex) */
.plantedex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.prancha {
  position: relative;
  display: block;
  background: #FDFBF4;
  border: 1px solid #E8E4D4;
  border-radius: 18px;
  padding: 0.65rem 0.65rem 0.8rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 16px rgb(36 48 31 / 0.10), 0 2px 4px rgb(36 48 31 / 0.06);
}
.prancha-foto {
  /* sem moldura branca: a prancha já é o cartão claro (Pedro, 19/08) */
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.prancha-foto img,
.prancha-foto .sem-foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.prancha strong {
  display: block;
  font-family: var(--serif);
  font-size: 0.98rem;
  margin-top: 0.5rem;
  line-height: 1.2;
}
.prancha em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--orquidea);
}
.prancha .moradores {
  display: block;
  font-size: 0.74rem;
  color: var(--musgo);
  margin-top: 0.25rem;
}
.prancha-selo {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #fff;
  background: var(--folha);
  border: 2px solid #FDFBF4;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgb(36 48 31 / 0.3);
}
.prancha-num {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--musgo);
  background: rgb(253 251 244 / 0.92);
  border: 1px solid var(--linha);
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
}
.prancha-misteriosa,
.prancha-avistada {
  background: #F3F5EC;
  border: 2px dashed #B9C4A8;
  box-shadow: none;
}
.prancha-misteriosa .prancha-foto,
.prancha-avistada .prancha-foto {
  background: #E9EDDF;
  border-style: dashed;
}
.selo-misterio { background: #8A9880; }
.silhueta { filter: brightness(0.22) saturate(0); }

/* mapa de naturalista */
.mapa {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: 1px solid #E8E4D4;
  background-color: #FBFAF2;
  background-image: repeating-radial-gradient(
    circle at 30% 20%,
    transparent 0 34px,
    rgb(92 114 79 / 0.10) 34px 35px
  );
  box-shadow: inset 0 2px 10px rgb(36 48 31 / 0.06);
  overflow: hidden;
}
.mapa-cheio {
  margin: -1rem -1rem calc(-6.5rem - env(safe-area-inset-bottom));
  width: calc(100% + 2rem);
  aspect-ratio: auto;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.mapa-real {
  background: #EFF3E7;
  z-index: 1;
}
.pin-broto { background: none; border: 0; }
.maplibregl-popup-content {
  border-radius: 12px;
  font-family: var(--sans);
  padding: 0.7rem 0.9rem;
  box-shadow: 0 6px 18px rgb(36 48 31 / 0.2);
}
.maplibregl-popup-content strong {
  font-family: var(--serif);
  color: var(--folha-escura);
}
.maplibregl-popup-content a { color: var(--folha); font-weight: 600; }
.mapa-pin {
  position: absolute;
  transform: translate(-50%, -90%);
  text-align: center;
  text-decoration: none;
}
.pin-gota {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  font-size: 1.15rem;
  background: var(--folha);
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgb(36 48 31 / 0.35);
}
.pin-gota { color: #fff; }
.pin-gota > * { transform: rotate(45deg); }
.pin-gota.pin-outra {
  background: #C98A3D;
  box-shadow: 0 3px 8px rgb(120 80 20 / 0.35);
}
.pin-cacho {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--folha);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border: 3px solid #FDFBF4;
  box-shadow: 0 3px 10px rgb(36 48 31 / 0.35);
  cursor: pointer;
}
.pin-cacho.pin-outra {
  background: #C98A3D;
  box-shadow: 0 3px 10px rgb(120 80 20 / 0.35);
}

/* folhinha do mapa */
.folha-fundo {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgb(36 48 31 / 0.35);
}
.folha-mapa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  max-width: 640px;
  margin: 0 auto;
  background: var(--cartao);
  border-radius: 20px 20px 0 0;
  padding: 1rem 1rem calc(5.8rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgb(36 48 31 / 0.25);
  max-height: 62vh;
  overflow-y: auto;
}
.folha-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--folha-escura);
  margin-bottom: 0.7rem;
}
.folha-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}
.folha-lista li { margin-bottom: 0.5rem; }
.folha-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: inherit;
}
.folha-item img,
.folha-item .sem-foto {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex: 0 0 auto;
}
.folha-info { flex: 1; min-width: 0; }
.folha-info strong {
  display: block;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--folha-escura);
}
.folha-info small { color: var(--musgo); font-size: 0.78rem; }
.tag-nova {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: #8A6420;
  background: #FBEFD4;
  border: 1px solid #E8CE93;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
}
.pin-rotulo {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--tinta);
  background: rgb(253 251 244 / 0.95);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-empilhado select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
}

/* câmera central na navegação */
.fab-camera {
  width: 60px;
  height: 60px;
  margin-top: -22px;
  border-radius: 50%;
  border: 4px solid var(--papel);
  background: var(--folha);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(36 48 31 / 0.35);
  flex: 0 0 auto;
}
.fab-camera:active { background: var(--folha-escura); }
.escolha-fundo {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgb(36 48 31 / 0.45);
}
.escolha-fundo[hidden] { display: none; }
.escolha {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  max-width: 640px;
  margin: 0 auto;
  background: var(--cartao);
  border-radius: 20px 20px 0 0;
  padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgb(36 48 31 / 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.escolha[hidden] { display: none; }
.escolha-opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.8rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 0.85rem 1rem;
}
.escolha-opcao span {
  grid-row: 1 / -1;
  font-size: 1.7rem;
}
.escolha-opcao strong { font-family: var(--serif); }
.escolha-opcao small { color: var(--musgo); font-size: 0.8rem; }

/* cinto de ferramentas (barra única) */
.cinto {
  display: flex;
  gap: 0.15rem;
  margin: 0.2rem 0 0.7rem;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 0.3rem;
  box-shadow: 0 2px 8px rgb(36 48 31 / 0.07);
}
.ferramenta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0.4rem 0.2rem 0.35rem;
  font-size: 1.05rem;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.ferramenta span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--musgo);
  font-family: var(--sans);
}
.ferramenta.ativa { background: var(--folha); }
.ferramenta.ativa span { color: #fff; }

/* bandeja do canteiro */
.bandeja {
  background: #E9EEDD;
  border: 1px solid #DCE3CD;
  border-radius: 20px;
  padding: 0.6rem 0.6rem 0.5rem;
  box-shadow: inset 0 2px 8px rgb(36 48 31 / 0.05);
}

/* carrossel de jardins: cada bandeja ocupa a tela e desliza com snap
   (Pedro, 15/08: sem beiradinha espiando — as bolinhas anunciam) */
.carrossel {
  display: flex;
  align-items: flex-start;  /* cada bandeja com a própria altura */
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* sangra até as bordas: a página seguinte entra rente à tela */
  margin: 0 -1rem;
  padding: 0 1rem;
}
.carrossel::-webkit-scrollbar { display: none; }
.pagina-jardim {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
  /* cada espaço ocupa a área visível entre o HUD e o menu (Pedro, 19/08);
     --bandeja-h é medida por JS. Sem ela, cai na altura do conteúdo. */
  height: var(--bandeja-h, auto);
  display: flex;
  flex-direction: column;
}
/* corpo rola dentro da bandeja: o pé fica sempre à vista */
.bandeja-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  align-content: start;
}
.bandeja-corpo::-webkit-scrollbar { display: none; }
.bandeja-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.1rem 0.3rem 0.5rem;
  flex: 0 0 auto;
}
.bandeja-nome {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--folha-escura);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acao-icone-pequena {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.8rem;
}
.bandeja-vazia {
  padding: 1.6rem 0.5rem;
  text-align: center;
  color: var(--musgo);
  font-size: 0.9rem;
}
.bandeja-nova {
  display: grid;
  place-items: center;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.bandeja-nova-emoji { font-size: 1.8rem; margin-bottom: 0.2rem; }
.form-jardim {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 17rem;
  padding: 1.4rem 0.4rem;
  text-align: center;
  color: var(--musgo);
}
.form-jardim input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--tinta);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 12px;
}
.form-jardim input:focus { outline: 2px solid var(--folha); outline-offset: 1px; }
.form-jardim .botao { width: 100%; }
/* régua de espaços: substituiu as bolinhas (Pedro, 19/08) — mostra quais
   existem, qual está aberto, e navega direto */
.regua-espacos {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -1rem 0.5rem;
  padding: 0 1rem 0.15rem;
}
.regua-espacos::-webkit-scrollbar { display: none; }
.chip-espaco {
  flex: 0 0 auto;
  max-width: 11rem;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--musgo);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-espaco.ativo {
  color: var(--folha-escura);
  background: #EAF0E1;
  border-color: #D6E2C6;
}
.chip-novo {
  color: var(--folha);
  border-style: dashed;
  border-color: #C6D2B4;
  padding: 0.35rem 0.7rem;
}
.chip-novo.ativo { border-style: solid; }
.oculto-total { display: none; }
.bandeja-pe {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0 0.2rem 0.1rem;
  font-size: 0.75rem;
  color: var(--musgo);
}
.bandeja-botao {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--folha-escura);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  text-decoration: none;
}
.grade.modo-cuidado .carta { cursor: pointer; }
.grade.modo-cuidado .carta img,
.grade.modo-cuidado .carta .sem-foto { opacity: 0.92; }
.respingo {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  pointer-events: none;
  animation: respingo 0.85s ease-out forwards;
}
@keyframes respingo {
  from { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.1); }
  to { opacity: 0; transform: scale(1.35) translateY(-10px); }
}

/* azulejos do jardim (3 por linha) */
.azulejos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 0.5rem;
}
.azulejo {
  display: block;
  text-decoration: none;
  color: inherit;
}
.az-foto {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #EAF0E1;
  border: 1px solid var(--linha);
  box-shadow: 0 3px 8px rgb(36 48 31 / 0.08);
}
.az-foto img,
.az-foto .sem-foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.az-selo {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.72rem;
  background: rgb(253 251 244 / 0.92);
  border-radius: 999px;
  padding: 0.12rem 0.3rem;
  box-shadow: 0 1px 3px rgb(36 48 31 / 0.25);
}
.az-chips {
  /* empilhados no canto superior esquerdo (Pedro, 14/08) */
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
/* berço não tem nome: tem etiqueta de palitinho (25/08) */
.az-etiqueta {
  display: block;
  margin-top: 0.28rem;
  text-align: center;
  line-height: 1.15;
}
.az-etiqueta strong {
  display: block;
  font-size: 0.72rem;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.az-etiqueta small { font-size: 0.58rem; color: var(--musgo); }

.az-chip {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--tinta);
  background: rgb(253 251 244 / 0.92);
  border-radius: 999px;
  padding: 0.1rem 0.32rem;
  box-shadow: 0 1px 3px rgb(36 48 31 / 0.2);
  white-space: nowrap;
}
.az-nome {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
  color: var(--folha-escura);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.azulejos.modo-cuidado .azulejo { cursor: pointer; }
.az-foto .respingo { font-size: 1.9rem; }

/* porteiro, análise e resultado do avistamento */
.porteiro {
  text-align: center;
  padding: 4.5rem 1.5rem 2rem;
}
.porteiro-icone {
  display: block;
  font-size: 3.2rem;
  margin-bottom: 0.8rem;
}
.porteiro p { margin-bottom: 0.6rem; }
.porteiro .botao { max-width: 16rem; margin: 1rem auto 0.8rem; display: block; }
.pulsa { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.18); opacity: 1; }
}
.res-barra {
  display: block;
  height: 6px;
  margin: 0.5rem 0 0.2rem;
  background: var(--linha);
  border-radius: 999px;
  overflow: hidden;
}
.res-barra > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--folha), #7FA36F);
  border-radius: 999px;
}
#resultado .foto-capa { margin-bottom: 1rem; }
#resultado .botao { margin-top: 0.4rem; }
.res-fechar { display: block; text-align: center; margin-top: 0.9rem; }

/* registros de avistamento (mapa) */
.registros {
  list-style: none;
  padding: 0;
  margin: 0;
}
.registros li { margin-bottom: 0.5rem; }
.registros a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: inherit;
}
.registros img,
.registros .sem-foto {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.registro-info strong {
  display: block;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--folha-escura);
}
.registro-info small { color: var(--musgo); font-size: 0.78rem; }

/* escada de níveis (conta) */
.escada {
  list-style: none;
  padding: 0;
  margin: 0;
}
.escada li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linha);
  color: var(--musgo);
  flex-wrap: wrap;
}
.escada li:last-child { border-bottom: 0; }
.escada-ponto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--linha);
  color: var(--musgo);
  font-size: 0.78rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.escada li.feita .escada-ponto { background: var(--folha); color: #fff; }
.escada li.feita .escada-nome { color: var(--folha-escura); font-weight: 600; }
.escada-prox {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--musgo);
}

/* status e selos */
.status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--musgo);
}
.selo {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--musgo);
  background: #EAF0E1;
  border: 1px dashed #A9B896;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  text-decoration: none;
  margin-top: 0.15rem;
}
.carta-status {
  display: block;
  font-size: 0.75rem;
  color: var(--musgo);
  margin-top: 0.2rem;
}

/* cuidados estruturados */
.cuidados { margin: 0; }
.cuidados > div {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linha);
}
.cuidados > div:last-child { border-bottom: 0; }
.cuidados dt {
  flex: 0 0 5.2rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--folha-escura);
}
.cuidados dd { margin: 0; font-size: 0.92rem; }
.cartao .notas {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--musgo);
}

/* chips de registro rápido */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.chips form { display: inline; }
.chip {
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.chip:active { background: #EAF0E1; border-color: var(--folha); }

/* visor de fotos em tela cheia */
.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #0B0F0A;
  display: flex;
  flex-direction: column;
}
.visor[hidden] { display: none; }
.visor .fechar {
  position: absolute;
  top: calc(0.6rem + env(safe-area-inset-top));
  left: 0.7rem;
  z-index: 2;
}
.visor-tira {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  align-items: center;
}
.visor-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 100%;
  padding: 3.2rem 0 calc(1rem + env(safe-area-inset-bottom));
}
.visor-slide img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
}
.visor-slide figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  color: rgb(255 255 255 / 0.85);
  font-size: 0.85rem;
  padding: 0.8rem 1rem 0;
}
.visor-acoes { display: flex; gap: 0.5rem; }
.visor-botao {
  border: 1px solid rgb(255 255 255 / 0.35);
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}
.visor-botao.perigo { color: #FFB4A4; border-color: rgb(255 180 164 / 0.5); }
.visor-botao.capa-atual { border-style: dashed; opacity: 0.8; }

/* login */
.entrada { text-align: center; padding-top: 3.5rem; }
.entrada-marca { font-size: 3rem; }
.entrada-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.2rem;
  color: var(--folha-escura);
}
.entrada-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--musgo);
  margin-bottom: 1.6rem;
}
.entrada .cartao { text-align: left; max-width: 360px; margin: 0 auto; }