/* 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;
  /* sem o retângulo cinza que o Chrome do Android pinta em cima de todo
     link tocado: a aba é botão de app, não hiperlink de página (Pedro,
     08/09). O feedback do toque é o item afundar de leve. */
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}
.aba:active { transform: scale(0.92); }
.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;
}
/* o que fica à direita do avatar: os contadores, numa linha */
.hud-info {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  font-size: 0.8rem;
}
.hud-conta { color: var(--folha); font-weight: 600; flex: 0 0 auto; }
.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; }
/* a placa do jogador: avatar e, saindo por trás dele, a pílula com nível e
   marcos. A pílula começa sob o avatar (margem negativa) e o avatar fica por
   cima (z-index). */
.hud-jogador {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.hud-jogador .avatar-hud { position: relative; z-index: 1; }
.hud-placa {
  margin-left: -12px;
  /* largo nas laterais, baixo em cima e embaixo (Pedro, 14/09). A ALTURA é
     fixa: a caixa de linha do emoji 🏅 (Noto Color Emoji no Linux) é mais
     alta que a do texto e esticava a pílula por dentro, e aí padding
     nenhum mudava nada — foi o que o Pedro viu. */
  display: inline-flex;
  align-items: center;
  /* quase da altura do avatar (40): sobram 4 px por fora, em cima e embaixo;
     o respiro fica DENTRO da pílula (Pedro, 14/09) */
  height: 32px;
  box-sizing: border-box;
  padding: 0 0.95rem 0 1.2rem;
  line-height: 1;
  border-radius: 0 999px 999px 0;
  background: #EFF3E7;
  border: 1px solid var(--linha);
  border-left: 0;
  color: var(--folha-escura);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
}
.hud-avatar {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  text-decoration: none;
}
.hud-avatar .avatar-hud,
.hud-jogador .avatar-hud {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
  border: 2px solid #EAF0E1;
  outline: 1px solid var(--linha);
  box-shadow: 0 2px 6px rgb(36 48 31 / 0.25);
}
.hud-nivel-selo {
  position: absolute;
  right: -5px;
  bottom: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--folha-escura);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  border: 2px solid var(--papel);
  box-sizing: border-box;
}
.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-proximo {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--musgo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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; }
/* o contador da senha chegou aos 12 */
.dica-campo.dica-ok { color: var(--folha); font-weight: 600; }
.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; }

/* o olhinho da senha: botão dentro do campo, à direita; o input ganha
   espaço para ele não cobrir o texto */
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 2.7rem; box-sizing: border-box; }
.olho {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0.35rem 0.45rem;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.olho:hover, .olho[aria-pressed="true"] { opacity: 1; }

/* 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;
}

/* ── gestos da câmera ─────────────────────────────────────────────────────
   Pinça faz zoom, toque foca, e a lanterna é um botão no topo. Sem
   `touch-action: none` o navegador toma os dois dedos para si (zoom da
   PÁGINA) e a pinça nunca chega ao código — foi o que aconteceu na primeira
   versão no app. */
.tomada { touch-action: none; }
.zoom-selo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.zoom-selo.on { opacity: 1; }
.lanterna {
  margin-left: auto;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.lanterna[aria-pressed="true"] { background: #ffd54a; }
.lanterna[hidden] { display: none; }
/* o anel amarelo onde a pessoa tocou para focar */
.foco-anel {
  position: fixed;
  z-index: 3;
  width: 64px;
  height: 64px;
  border: 2px solid #ffd54a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.foco-anel.on { opacity: 1; }
/* a foto plena leva até dois segundos: o disparo gira enquanto isso */
.disparo.capturando { pointer-events: none; }
.disparo.capturando::after {
  background: conic-gradient(#fff 0 25%, rgb(255 255 255 / 0.25) 25% 100%);
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.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; }

/* ── avatar do jardineiro ────────────────────────────────────────────────
   Foto em círculo ou iniciais sobre cor fixa por pessoa (data-cor vem do
   username). Três tamanhos: p (dentro de texto), m (lista), g (Conta). */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  vertical-align: middle;
  border-radius: 50%;
  overflow: hidden;
  background: #6F8F63;
  color: #FFFFFF;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-p { width: 1.25rem; height: 1.25rem; font-size: 0.55rem; }
.avatar-m { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }
.avatar-g { width: 6rem; height: 6rem; font-size: 2.2rem; border: 3px solid var(--cartao); box-shadow: 0 2px 10px rgb(0 0 0 / 0.12); }
.avatar[data-cor="0"] { background: #6F8F63; }
.avatar[data-cor="1"] { background: #B8743C; }
.avatar[data-cor="2"] { background: #5A7F8F; }
.avatar[data-cor="3"] { background: #8F5A7C; }
.avatar[data-cor="4"] { background: #7A8A3A; }
.avatar[data-cor="5"] { background: #A0623F; }
.assinatura .avatar, .local .avatar, .dica .avatar { margin-right: 0.25rem; }
.lista-jardineiros .texto { display: inline-flex; align-items: center; gap: 0.5rem; }
/* ── o batismo na celebração do plantar (Pedro, 14/09) ─────────────────────
   A mesma celebração do avistar, com um cartão claro por baixo do nome da
   espécie. Cor com fundo próprio é a única cor segura sobre foto. O
   cartão nasce na linha do nome (o pé já tem 1,2rem de cada lado) e o
   respiro para o texto de cima é dele — vale com ou sem nome científico. */
.celebra-batismo .celebra-pe { bottom: calc(1rem + env(safe-area-inset-bottom)); }
.celebra-batismo .celebra-nome { margin-bottom: 0; }
.celebra-batismo .celebra-sci { margin-bottom: 0; }
.batismo { background: rgba(244,247,239,.96); border-radius: 16px; padding: 1.2rem 0.9rem 0.9rem; margin: 0.9rem 0 0; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.batismo label { display: block; font-weight: 600; color: var(--folha-escura); font-size: 0.95rem; line-height: 1.35; }
.batismo .campo-nome { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.batismo input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; padding: 0.6rem 0.7rem; border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.batismo .dado { width: 3rem; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font-size: 1.3rem; cursor: pointer; position: static; transform: none; }
.batismo .origem { display: block; font-family: var(--serif); font-style: italic; color: var(--musgo); font-size: 0.9rem; margin: 0.3rem 0 0.6rem; }
.batismo .erro-nome { color: #B4432E; font-size: 0.88rem; margin: 0 0 0.5rem; }
.batismo .botao { margin: 0; width: 100%; }
.batismo .cancelar { display: block; width: 100%; text-align: center; margin-top: 0.5rem; font: inherit; font-size: 0.9rem; color: var(--musgo); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* Avistada por: quem viu primeiro e quem reencontrou, com a foto que tirou */
.lista-jardineiros li.reencontro .texto { gap: 0.5rem; }
.reencontro-foto { width: 2.25rem; height: 2.25rem; border-radius: 8px; object-fit: cover; border: 1px solid var(--linha); }
.acoes-reencontro { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.8rem 0 0; }
.acoes-reencontro .botao-mini { align-self: flex-start; }
.acoes-reencontro .dica { margin: 0; }

/* a Conta: foto grande no cabeçalho, com as ações embaixo */
.cabeca-conta { display: flex; align-items: center; gap: 1rem; }
.cabeca-conta .cabeca { margin: 0; }
.acoes-foto { display: flex; gap: 0.8rem; margin: 0.4rem 0 0; flex-wrap: wrap; }
.acoes-foto .acao-quieta { padding: 0.4rem 0; margin: 0; }

/* recorte da foto de perfil: tela cheia, como a câmera */
.recorte {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #0E140B;
  display: flex;
  flex-direction: column;
}
.recorte-area { flex: 1; min-height: 0; }
.recorte-area img { max-width: 100%; display: block; }
.recorte-acoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
  background: #151B14;
}
.recorte-acoes .acao-quieta { color: #DCE9D4; }
.recorte-acoes .botao { margin: 0; width: auto; padding: 0.6rem 1.4rem; }
.recorte .cropper-view-box, .recorte .cropper-face { border-radius: 50%; }
.recorte .cropper-view-box { outline: 2px solid #A8D096; }

/* 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); }
}

/* ── a moldura do modo de cuidado ────────────────────────────────────────
   Luz que vem das bordas e esmaece para o centro, na cor da ação. Por cima
   de tudo (menos da câmera), sem pegar toque. Acende e apaga com transição;
   por isso está sempre no DOM e só troca de classe. */
.moldura-cuidado {
  position: fixed;
  inset: 0;
  /* acima do HUD (44) e das abas (40), para a luz aparecer em cima e
     embaixo também; abaixo da câmera (50) */
  z-index: 46;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  --cor-cuidado: #3B82F6;
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--cor-cuidado) 70%, transparent),
    inset 0 0 48px 14px color-mix(in srgb, var(--cor-cuidado) 45%, transparent);
}
.moldura-cuidado.acesa { opacity: 1; }
.moldura-cuidado[data-ferramenta="rega"] { --cor-cuidado: #3B82F6; }
.moldura-cuidado[data-ferramenta="adubo"] { --cor-cuidado: #3A9D4F; }
.moldura-cuidado[data-ferramenta="poda"] { --cor-cuidado: #E0A100; }
.moldura-cuidado[data-ferramenta="colheita"] { --cor-cuidado: #D4A017; }
.moldura-cuidado[data-ferramenta="trato"] { --cor-cuidado: #8B5CF6; }
.moldura-cuidado[data-ferramenta="broto"] { --cor-cuidado: #3A9D4F; }
@media (prefers-reduced-motion: reduce) { .moldura-cuidado { transition: none; } }

/* 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.
   É ESTADO DA TELA INTEIRA (procurando GPS, enviando fotos, analisando): fica
   no meio da tela, não no topo com um vazio embaixo (Pedro, 13/09). Os
   pseudo-elementos com flex: 1 centralizam sem cortar o topo quando o
   conteúdo é maior que a tela (o tutorial do GPS) — nesse caso encolhem a
   zero e a página rola normalmente. */
.porteiro {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.porteiro::before, .porteiro::after { content: ""; flex: 1 1 0; }
.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; }


/* ---------- tela de celebração do avistamento (A7, 28/08) ----------
   Foto sangrada + texto sobreposto. A proteção do texto é PROGRESSIVE
   BLUR: 6 camadas de desfoque crescente (no HTML), com o escurecimento
   SEPARADO em gradiente. Uma camada só de blur com máscara produz efeito
   fantasma. O escuro é o verde do app, não preto. Texto sempre BRANCO:
   é o único que sobrevive a fundo chapado claro (medido em 6 fundos). */
.celebra {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--tinta);
}
.celebra-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.celebra-zona { position: absolute; left: 0; right: 0; overflow: hidden;
  pointer-events: none; }
.celebra-zona-topo { top: 0; height: 32%; }
.celebra-zona-pe { bottom: 0; height: 54%; }
.celebra-zona .cam { position: absolute; inset: 0; display: block; }
.celebra-sombra { position: absolute; left: 0; right: 0; pointer-events: none; }
.celebra-sombra-topo {
  top: 0; height: 32%;
  background: linear-gradient(to bottom, rgba(44,69,39,.90) 0%,
    rgba(44,69,39,.78) 34%, rgba(44,69,39,.52) 58%,
    rgba(44,69,39,.24) 80%, rgba(44,69,39,0) 100%);
}
.celebra-sombra-pe {
  bottom: 0; height: 54%;
  background: linear-gradient(to top, rgba(44,69,39,.93) 0%,
    rgba(44,69,39,.84) 24%, rgba(44,69,39,.66) 44%,
    rgba(44,69,39,.44) 62%, rgba(44,69,39,.20) 82%, rgba(44,69,39,0) 100%);
}
.celebra-marca {
  position: absolute;
  top: calc(2.4rem + env(safe-area-inset-top));
  left: 1rem; right: 1rem;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.05;
  color: #fff;
}
.celebra-pe {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(1.8rem + env(safe-area-inset-bottom));
  padding: 0 1.2rem;
  color: #fff;
}
.celebra-nome {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: .98;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}
.celebra-sci {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: rgba(255,255,255,.86);
  margin-top: .35rem;
}
.celebra-btn {
  display: block;
  text-align: center;
  background: #fff;
  color: var(--folha-escura);
  font-weight: 700;
  font-size: 1.02rem;
  padding: .95rem;
  border-radius: 14px;
  text-decoration: none;
  margin-top: 1.3rem;
}
.celebra-link {
  display: block;
  text-align: center;
  color: rgba(255,255,255,.9);
  text-decoration: underline;
  font-size: .9rem;
  padding: .55rem;
}
@media (min-width: 520px) {
  .celebra-nome { font-size: 2.6rem; }
  .celebra-pe, .celebra-marca { max-width: 460px; margin-inline: auto; }
}

/* ── celebração: progressive blur em 6 camadas ─────────────────────────────
   Uma camada só com máscara produz efeito fantasma (foto nítida e borrada
   sobrepostas na transição). Seis camadas com desfoque crescente, cada uma
   entrando mais tarde, dissolvem sem costura. O escurecimento é SEPARADO —
   um gradiente por cima —, senão não há como calibrar um sem o outro. */
.celebra-zona .cam[data-camada="1"]{backdrop-filter:blur(.6px);-webkit-backdrop-filter:blur(.6px)}
.celebra-zona .cam[data-camada="2"]{backdrop-filter:blur(1.2px);-webkit-backdrop-filter:blur(1.2px)}
.celebra-zona .cam[data-camada="3"]{backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.celebra-zona .cam[data-camada="4"]{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.celebra-zona .cam[data-camada="5"]{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.celebra-zona .cam[data-camada="6"]{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

.celebra-zona-topo .cam[data-camada="1"]{mask-image:linear-gradient(to bottom,#000 63%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 63%,transparent 100%)}
.celebra-zona-topo .cam[data-camada="2"]{mask-image:linear-gradient(to bottom,#000 47%,transparent 83%);-webkit-mask-image:linear-gradient(to bottom,#000 47%,transparent 83%)}
.celebra-zona-topo .cam[data-camada="3"]{mask-image:linear-gradient(to bottom,#000 30%,transparent 67%);-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 67%)}
.celebra-zona-topo .cam[data-camada="4"]{mask-image:linear-gradient(to bottom,#000 13%,transparent 50%);-webkit-mask-image:linear-gradient(to bottom,#000 13%,transparent 50%)}
.celebra-zona-topo .cam[data-camada="5"]{mask-image:linear-gradient(to bottom,#000 0%,transparent 33%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 33%)}
.celebra-zona-topo .cam[data-camada="6"]{mask-image:linear-gradient(to bottom,#000 0%,transparent 17%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 17%)}

.celebra-zona-pe .cam[data-camada="1"]{mask-image:linear-gradient(to top,#000 63%,transparent 100%);-webkit-mask-image:linear-gradient(to top,#000 63%,transparent 100%)}
.celebra-zona-pe .cam[data-camada="2"]{mask-image:linear-gradient(to top,#000 47%,transparent 83%);-webkit-mask-image:linear-gradient(to top,#000 47%,transparent 83%)}
.celebra-zona-pe .cam[data-camada="3"]{mask-image:linear-gradient(to top,#000 30%,transparent 67%);-webkit-mask-image:linear-gradient(to top,#000 30%,transparent 67%)}
.celebra-zona-pe .cam[data-camada="4"]{mask-image:linear-gradient(to top,#000 13%,transparent 50%);-webkit-mask-image:linear-gradient(to top,#000 13%,transparent 50%)}
.celebra-zona-pe .cam[data-camada="5"]{mask-image:linear-gradient(to top,#000 0%,transparent 33%);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 33%)}
.celebra-zona-pe .cam[data-camada="6"]{mask-image:linear-gradient(to top,#000 0%,transparent 17%);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 17%)}

/* a foto entra UMA vez como variável, senão o HTML engorda */
.celebra-foto{background-image:var(--foto);background-size:cover;background-position:center}

/* o input de arquivo vive escondido: quem dispara é o botão da câmera */
.entrada-escondida{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* aviso na câmera: a tela não tem moldura, então o guia acumula a função de
   contar o que deu errado — e precisa se distinguir da dica normal */
.guia-erro {
  background: rgb(150 30 20 / 0.85);
  font-style: normal;
  font-weight: 600;
}

/* O "Pronto" nasce escondido e quem o revela é o JS, ao entrar a primeira
   foto. Classe em vez do atributo `hidden` porque o atributo vinha do
   template e o LiveView o repunha a cada re-render. */
.pronto-oculto {
  display: none;
}

/* A miniatura vem do canvas, então nasce com a largura do VÍDEO (1920px).
   Sem esta regra ela entrava em tamanho natural e cobria a tela inteira —
   o guia subia, o botão de disparo era empurrado para fora e a câmera
   parecia ter travado numa foto estática. */
.tira-miniaturas img {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgb(255 255 255 / 0.85);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
/* a tira não pode crescer e empurrar os controles para fora da tela */
.tira-miniaturas {
  max-height: 70px;
  flex-wrap: nowrap;
}

/* ── entrar por código ───────────────────────────────────────────────────
   Duas classes nasceram hoje com o login por código e ficaram sem estilo:
   o campo saía do tamanho de um campo comum, quando o que se digita ali são
   seis dígitos lidos de outra tela. */
.campo-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.9rem;
  letter-spacing: 0.5rem;
  text-align: center;
  padding: 0.7rem 0.5rem;
}
/* o "ou" que separa entrar com senha de entrar com código */
.entrada-ou {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.4rem auto 1rem;
  max-width: 22rem;
  color: var(--tinta-fraca, #6B7A63);
  font-size: 0.9rem;
}
.entrada-ou::before,
.entrada-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha, #D8E0CE);
}

/* Cartão do link de migração — é peça NOVA (não existia no painel antigo),
   então ganha estilo próprio em vez de emprestar de outra tela. O campo é
   largo e monoespaçado porque o conteúdo é um link comprido que alguém vai
   copiar inteiro. */
.cartao-link { margin-bottom: 1rem; }
.campo-link {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  padding: 0.6rem 0.7rem;
  margin: 0.4rem 0 0.6rem;
}

/* ── acervo na tela de migração ──────────────────────────────────────────
   Peça nova: não existia no app antigo, então ganha estilo próprio. É a
   primeira coisa que o jardineiro vê na virada, e o que ela precisa dizer é
   "seu jardim está inteiro" — daí os números grandes, um por linha. */
.acervo-migracao { text-align: left; }
.acervo-lista {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.acervo-lista li {
  font-size: 1.05rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.acervo-lista strong {
  font-size: 1.25rem;
  color: var(--folha-escura, #2C4527);
}
.dica-migracao { margin: 1rem auto; max-width: 26rem; }

/* ── prévia dos templates de e-mail (painel) ─────────────────────────────
   O quadro é um iframe: e-mail tem estilo inline e regras próprias, e
   renderizar direto na página faria um vazar no outro. */
.previa-email { margin-bottom: 1.2rem; }
.previa-quadro { height: 100%; }
.previa-cabecalho {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.8rem;
  margin: 0.6rem 0 0.9rem;
  font-size: 0.85rem;
}
.previa-cabecalho dt { color: var(--tinta-fraca, #6B7A63); }
.previa-cabecalho dd { margin: 0; }
.previa-quadro {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid var(--linha, #D8E0CE);
  border-radius: 12px;
  background: #F2F5EC;
}

/* ── segundo fator do painel ─────────────────────────────────────────────
   O QR precisa de fundo branco e margem: leitor de celular erra quando o
   código encosta em cor. */
.qr-2fa {
  display: flex;
  justify-content: center;
  padding: 1rem;
  margin: 0.8rem 0;
  background: #FFFFFF;
  border: 1px solid var(--linha, #D8E0CE);
  border-radius: 14px;
}
.qr-2fa svg { width: 220px; height: 220px; }

/* Os códigos de recuperação aparecem UMA vez. Monoespaçado e grande porque
   vão ser copiados à mão para um papel ou gerenciador de senhas. */
.recuperacao { border: 2px solid #C25E3A; }
.lista-recuperacao {
  list-style: none;
  margin: 0.8rem 0 1rem;
  padding: 0.9rem;
  background: #F7FAF2;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
}
.lista-recuperacao li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-align: center;
}
.erro-2fa { color: #B0432A; font-weight: 600; }

/* ── a porta do painel: escuro, o oposto do app ──────────────────────────
   O app é claro e verde-claro. Aqui é o inverso completo, e de propósito:
   as duas telas pedem senha na mesma posição, e sem um contraste forte
   ninguém sabe de relance em qual das duas está. O verde continua, porque
   é o mesmo produto — o que muda é a luz. */
/* o corpo inteiro, para o escuro não virar uma faixa no meio da tela */
.corpo-porta { background: #10150F; }
.corpo-porta .admin-main {
  max-width: none;
  padding: 0;
}
.entrada-painel {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.1rem;
  color: #E8EFE2;
}
.marca-painel {
  margin: 0 0 1.6rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.entrada-painel .entrada-sub {
  margin: -1.1rem 0 1.6rem;
  text-align: center;
  color: #93A489;
  font-size: 0.95rem;
}

/* o cartão é uma superfície um pouco mais clara que o fundo, com borda:
   sem a borda ele some no preto */
.entrada-painel .cartao {
  background: #1A211A;
  border: 1px solid #2E3A2C;
  box-shadow: none;
  max-width: 24rem;
  width: 100%;
  margin: 0 auto;
}
.entrada-painel label {
  color: #A8B79E;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.entrada-painel input {
  background: #0D120C;
  border: 1px solid #35422F;
  color: #F2F7EE;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
}
.entrada-painel input:focus {
  border-color: #6FA05E;
  outline: 2px solid rgb(111 160 94 / 0.35);
  outline-offset: 1px;
}
/* o autofill do navegador força fundo claro: sem isto o campo fica amarelo
   berrante no meio do escuro */
.entrada-painel input:-webkit-autofill,
.entrada-painel input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F2F7EE;
  -webkit-box-shadow: 0 0 0 1000px #0D120C inset;
}
.entrada-painel .botao {
  background: #6FA05E;
  color: #0D120C;
  font-weight: 700;
}
.entrada-painel .dica,
.entrada-painel-pe {
  color: #8B9B82;
  text-align: center;
  margin-top: 1.2rem;
  font-size: 0.85rem;
}
.entrada-painel .campo-codigo {
  text-transform: none;
  letter-spacing: 0.5rem;
}

/* ══ PAINEL: escuro por dentro também ═══════════════════════════════════
   A porta já era escura; o painel aberto continuava claro, e a virada de
   luz no meio do caminho fazia parecer que se tinha voltado para o app. */
.corpo-admin {
  background: #10150F;
  color: #E8EFE2;
  min-height: 100dvh;
  /* espaço para a barra do rodapé não cobrir o fim da lista */
  padding-bottom: calc(4.9rem + env(safe-area-inset-bottom));
}
.corpo-admin .admin-topo {
  background: #0B0F0A;
  border-bottom: 1px solid #263021;
  color: #E8EFE2;
}
.corpo-admin .admin-marca {
  font-family: var(--serif);
  font-weight: 700;
  color: #FFFFFF;
}
.corpo-admin .admin-titulo,
.corpo-admin .admin-secao { color: #F2F7EE; }
.corpo-admin .admin-sub,
.corpo-admin .admin-quando,
.corpo-admin .admin-user,
.corpo-admin .admin-visto,
.corpo-admin .dica { color: #93A489; }
.corpo-admin .cartao,
.corpo-admin .admin-item {
  background: #1A211A;
  border: 1px solid #2E3A2C;
  box-shadow: none;
}
.corpo-admin .admin-vazio { color: #8B9B82; }
.corpo-admin input,
.corpo-admin select {
  background: #0D120C;
  border: 1px solid #35422F;
  color: #F2F7EE;
}
.corpo-admin .botao { background: #6FA05E; color: #0D120C; }
.corpo-admin .acao-quieta { color: #A8B79E; }
.corpo-admin .perigo { color: #E08268; }

/* ── a barra do rodapé ───────────────────────────────────────────────────
   Fixa embaixo, na zona que o polegar alcança. Alvo de 56px de altura: a
   régua de acessibilidade pede 44, e aqui vale a folga porque quem usa o
   painel costuma estar em pé, com uma mão só. */
.admin-rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #0B0F0A;
  border-top: 1px solid #263021;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
.rodape-item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 56px;
  padding: 0.45rem 0.2rem;
  text-decoration: none;
  color: #8B9B82;
  font-size: 0.7rem;
}
.rodape-item.ativa { color: #A8D096; }
/* a marca da aba atual é uma barra no topo do item: cor sozinha não basta
   para quem não distingue verde */
.rodape-item.ativa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: #A8D096;
}
.rodape-icone { font-size: 1.25rem; line-height: 1; }
.rodape-texto { line-height: 1; }
.rodape-selo {
  position: absolute;
  top: 0.35rem;
  right: 50%;
  transform: translateX(1.35rem);
  min-width: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #C25E3A;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

/* Erro deixa de ser igual a aviso. Os dois usavam a mesma casca creme, então
   "planta adicionada" e "não consegui" tinham exatamente a mesma cara. */
.avisos-erro {
  background: #FCEEEA;
  border-color: #E7BDB0;
  color: #8A2E14;
}

/* ── avisos dentro do painel ─────────────────────────────────────────────
   O `.avisos` tem fundo creme fixo e NÃO define cor de texto. No painel
   escuro o texto herdava o claro do tema e sumia dentro do creme — foi o
   que apareceu no "Segundo fator desligado". */
.corpo-admin .avisos {
  background: #1E2A1B;
  border-color: #3A4C34;
  color: #DCE9D4;
}
.corpo-admin .avisos-erro {
  background: #2B1A16;
  border-color: #5A3227;
  color: #F0BBAA;
}

/* `.corpo-admin .dica` tem especificidade maior que `.erro-2fa` e vencia:
   "esse código não confere" saía na mesma cor de um texto de apoio. Erro
   precisa PARECER erro — e a cor não vem sozinha, vem com o peso da fonte,
   para quem não distingue vermelho de verde. */
.corpo-admin .dica.erro-2fa,
.corpo-admin .erro-2fa {
  color: #F0A08A;
  font-weight: 700;
}

/* ── recusar longe de aprovar ────────────────────────────────────────────
   O item vira uma coluna: dados e "Aprovar" em cima, e a recusa embaixo,
   depois de uma divisa. A distância é a proteção — confirmação sozinha vira
   automatismo em quem aprova vários seguidos. */
.admin-item { position: relative; }
.admin-item-recusa {
  flex-basis: 100%;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linha);
  text-align: right;
}
.corpo-admin .admin-item-recusa { border-top-color: #2E3A2C; }
.admin-item-recusa .acao-quieta {
  font-size: 0.82rem;
  /* alvo confortável sem virar botão: quem quer recusar precisa acertar,
     quem não quer não deve esbarrar */
  display: inline-block;
  padding: 0.45rem 0.2rem;
}

/* a etiqueta de admin na lista de usuários */
.marca-admin {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #35422F;
  color: #A8D096;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* separa quem espera de quem já entrou */
.bloco-espera { margin-bottom: 1.6rem; }
.corpo-admin .secao-solta { margin: 1.4rem 0 0.6rem; color: #93A489; }
/* quatro TAREFAS no rodapé (Usuários, E-mails, Catálogo, Configurações); a
   Conta não é tarefa e mora no menu */
.admin-rodape { grid-template-columns: repeat(4, 1fr); }

/* ── o catálogo ──────────────────────────────────────────────────────────
   Duas listas, uma por vez: "a curar" é a fila; "curadas", o acervo. As
   pílulas carregam a contagem — é o número que diz quanto falta. */
.catalogo-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.9rem 0 0.2rem;
}
.catalogo-resumo > div {
  padding: 0.55rem 0.6rem;
  border: 1px solid #2E3A2C;
  border-radius: 10px;
  background: #151B14;
}
.catalogo-resumo dt { font-size: 0.7rem; color: #8B9B82; text-transform: uppercase; letter-spacing: 0.04em; }
.catalogo-resumo dd { margin: 0.1rem 0 0; font-family: var(--serif); font-size: 1.35rem; color: #F2F7EE; }
.listas-catalogo { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.4rem; }
.catalogo-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.4rem 0 0.6rem; }
.busca-catalogo { flex: 1 1 14rem; }
.busca-catalogo input {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font-size: 0.95rem;
}
.ordem-catalogo { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.ordem-item { color: #93A489; text-decoration: none; padding: 0.15rem 0.45rem; border-radius: 999px; }
.ordem-item.ativa { color: #DCE9D4; background: #1A211A; }
.celula-mini { flex: 0 0 auto; }
.mini-especie {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: #0D120C;
}
.mini-vazia { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #4C5A47; }
.pendente { font-style: normal; color: #C9A227; }
/* no celular a miniatura fica ao lado do nome, não numa linha própria */
.item-catalogo { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; }
.item-catalogo .celula-mini { grid-row: 1 / span 4; }
.pilula-lista {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #2E3A2C;
  color: #93A489;
  text-decoration: none;
  font-size: 0.9rem;
}
.pilula-lista.ativa { color: #DCE9D4; background: #1A211A; border-color: #6FA05E; }
.pilula-conta {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #35422F;
  color: #A8D096;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
/* a ficha da espécie dentro do painel: os mesmos blocos do Herbário, no escuro */
.corpo-admin .secao,
.corpo-admin .cuidados dt { color: #DCE9D4; }
.corpo-admin .cuidados > div { border-bottom-color: #2E3A2C; }
.corpo-admin .cartao p,
.corpo-admin .cuidados dd { color: #C9D8BE; }
.corpo-admin .fontes-ficha,
.corpo-admin .credito-foto { color: #93A489; }
.corpo-admin .anotacoes .texto { color: #DCE9D4; }
.corpo-admin .anotacoes .quando { color: #93A489; }
.corpo-admin .foto-capa { border-radius: 12px; }
.estado-especie { margin: 0.4rem 0 0.2rem; font-size: 0.85rem; }
.link-especie { text-decoration: none; color: inherit; }
.link-especie:hover strong { text-decoration: underline; }
.celula-marcas { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.marca-estado { color: #6E7D66; font-size: 0.8rem; }
.marca-estado.tem { color: #A8D096; }

/* ── a conta ─────────────────────────────────────────────────────────────
   O círculo com iniciais é a identidade de quem entrou — e o caminho para a
   Conta. Iniciais, não foto: admin não tem foto, e um ícone genérico não
   diria QUEM está logado. */
.avatar-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #35422F;
  color: #DCE9D4;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
/* na barra do topo ele é um link: alvo de 44px sem crescer o círculo */
.topo-conta {
  box-shadow: 0 0 0 4px transparent;
  outline-offset: 3px;
}
.topo-conta:hover { background: #45563E; }

/* Só existem na coluna larga. No celular a marca e a conta já estão na
   barra do topo, e um rodapé de cinco células perderia o polegar. */
.coluna-marca,
.coluna-conta,
.admin-rodape > .menu-conta { display: none; }

/* ── o menu da conta ─────────────────────────────────────────────────────
   Um <details>: o summary é o gatilho (círculo no celular, bloco com nome na
   coluna larga) e a lista abre colada nele. Sem seta de details: o gatilho
   já diz o que é. */
.menu-conta { position: relative; }
.menu-conta > summary { list-style: none; cursor: pointer; }
.menu-conta > summary::-webkit-details-marker { display: none; }
.menu-conta-lista {
  position: absolute;
  z-index: 30;
  min-width: 12rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #151B14;
  border: 1px solid #2E3A2C;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
}
/* no celular abre para BAIXO do círculo, alinhado à direita */
.menu-topo .menu-conta-lista { top: calc(100% + 0.5rem); right: 0; }
.menu-conta-item {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  color: #DCE9D4;
  text-decoration: none;
  font-size: 0.92rem;
}
.menu-conta-item:hover { background: #1E271D; }
.menu-conta-item.ativa { color: #A8D096; background: #1A211A; }
.menu-conta-divisa { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid #2E3A2C; }
.menu-conta-item.sair { color: #E08268; }
.menu-conta-item.sair:hover { background: #2B1A16; }

/* ── o menu de ações por linha (Usuários) ─────────────────────────────────
   Mesma anatomia do menu da conta: <details> com a lista absoluta. O gatilho
   é um "⋯" discreto no fim da linha; abre para baixo, alinhado à direita.
   Na página do jardineiro o menu fica ABERTO e vira uma fileira de botões. */
.menu-acoes-gatilho { font-size: 1.1rem; letter-spacing: 0.1em; padding: 0.2rem 0.5rem; }
.menu-acoes .menu-conta-lista { top: calc(100% + 0.3rem); right: 0; }
.menu-acoes .menu-conta-item { white-space: nowrap; }
button.menu-conta-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.menu-conta-item.copiado { color: #A8D096; }
.menu-aberto > summary { display: none; }
.menu-aberto .menu-conta-lista { position: static; box-shadow: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.2rem; padding: 0; background: none; border: 0; min-width: 0; }
.menu-aberto .menu-conta-lista li { list-style: none; }
.menu-aberto .menu-conta-item { width: auto; border: 1px solid #2E3A2C; border-radius: 999px; padding: 0.4rem 0.8rem; }
.menu-aberto .menu-conta-divisa { margin: 0; padding: 0; border: 0; }
.marca-suspenso { color: #E08268 !important; }
.acoes-jardineiro { margin: 0.2rem 0 0.8rem; }

/* Conta e Segurança: uma coluna de leitura, não uma grade */
.pagina-estreita { max-width: 34rem; }

/* ── escolher o modo de cadastro ─────────────────────────────────────────
   Lista, não cartões: a escolha é entre duas REGRAS, e regra se lê. Cada
   linha explica o que acontece; o rádio deixa claro que só uma vale. */
.opcoes-modo { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.opcao-modo {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem;
  margin-bottom: 0.6rem;
  border: 1px solid #2E3A2C;
  border-radius: 12px;
  cursor: pointer;
}
.opcao-modo.ativa { border-color: #6FA05E; background: #171F16; }
.opcao-modo input { margin-top: 0.2rem; accent-color: #6FA05E; flex: 0 0 auto; }
.opcao-modo-texto { display: grid; gap: 0.2rem; }
.opcao-modo-texto strong { color: #F2F7EE; }
.opcao-modo-texto small { color: #93A489; line-height: 1.45; }

/* ── o modal ─────────────────────────────────────────────────────────────
   Abrir o cadastro por engano só se descobre quando alguém de fora já
   entrou. O modal existe para a mudança passar pelos olhos antes. */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgb(6 9 5 / 0.72);
}
.modal-caixa {
  width: 100%;
  max-width: 26rem;
  padding: 1.3rem;
  background: #1A211A;
  border: 1px solid #3A4C34;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);
}
.modal-texto { color: #DCE9D4; line-height: 1.55; margin: 0.5rem 0 1.2rem; }
.modal-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.modal-acoes .botao { width: auto; }
/* abrir o cadastro é a ação de maior consequência aqui, e a cor diz isso */
.botao-alerta { background: #C25E3A; color: #FFFFFF; }

/* ── aba de e-mails: lista + um por vez ──────────────────────────────────
   Os seis empilhados viravam uma rolagem longa em que nenhum se lia. */
.lista-emails { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.item-email {
  display: grid;
  gap: 0.15rem;
  text-align: left;
  padding: 0.7rem 0.85rem;
  background: #1A211A;
  border: 1px solid #2E3A2C;
  border-radius: 12px;
  cursor: pointer;
  color: inherit;
}
.item-email.ativa { border-color: #6FA05E; background: #1E2A1B; }
.item-email strong { color: #F2F7EE; font-size: 0.95rem; }
.item-email small { color: #93A489; line-height: 1.4; }

.previa-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 0.9rem;
}
.grupo-botoes {
  display: inline-flex;
  border: 1px solid #35422F;
  border-radius: 999px;
  overflow: hidden;
}
.botao-alternador {
  padding: 0.35rem 0.8rem;
  background: transparent;
  border: 0;
  color: #93A489;
  font-size: 0.82rem;
  cursor: pointer;
}
.botao-alternador.ativa { background: #35422F; color: #E8EFE2; font-weight: 600; }

/* a moldura simula a largura em que o e-mail vai ser lido — a de celular é a
   que importa, e por isso é o padrão */
.moldura-previa {
  margin: 0 auto;
  border: 1px solid #35422F;
  border-radius: 12px;
  overflow: hidden;
  background: #F2F5EC;
  height: 520px;
}
.moldura-celular { max-width: 380px; }
.moldura-desktop { max-width: 100%; }

/* a versão TEXTO, que alguns clientes de e-mail mostram no lugar do HTML */
.previa-texto {
  margin: 0;
  padding: 1rem;
  background: #0D120C;
  border: 1px solid #35422F;
  border-radius: 12px;
  color: #DCE9D4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}



/* ══ CELULAR: o item é um CARTÃO ════════════════════════════════════════
   Uma pessoa por bloco, informação empilhada. É o que cabe numa tela
   estreita — colunas ali viram texto espremido. */
.corpo-admin .celula { min-width: 0; }
.celula-principal strong { display: block; color: #F2F7EE; }
.celula[data-rotulo]::before {
  content: attr(data-rotulo) " ";
  color: #6E7D66;
  font-size: 0.78rem;
}
.celula { font-size: 0.85rem; color: #93A489; }
.celula-marca em { font-style: normal; color: #C9A227; font-size: 0.8rem; }
.cabecalho-colunas { display: none; }

/* ══ PAINEL EM TELA LARGA ═══════════════════════════════════════════════
   O mesmo markup, outra forma. No celular a navegação fica no rodapé, onde
   o polegar alcança; num monitor não existe polegar, e uma barra colada na
   base fica longe dos olhos e do cursor. Vira coluna à esquerda, que é o
   padrão de painel administrativo.

   Não dá para usar grid no corpo: a navegação vive DENTRO do `main` (foi
   para lá quando o indicador da aba parou de acompanhar a navegação, porque
   o root layout só renderiza uma vez). Então ela continua fixa, agora na
   lateral, e o conteúdo recua para não passar por baixo.

   Uma média só, em 900px: acima disso há espaço para as duas colunas. */
@media (min-width: 900px) {
  .corpo-admin { padding-bottom: 0; }

  .admin-rodape {
    top: 0;
    bottom: 0;
    right: auto;
    width: 15rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0.7rem;
    border-top: 0;
    border-right: 1px solid #263021;
  }

  .rodape-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    font-size: 0.95rem;
  }
  .rodape-item.ativa { background: #1A211A; }
  /* na horizontal a marca do item atual vira uma barra à ESQUERDA: em cima
     ela ficaria sobre o texto */
  .rodape-item.ativa::before {
    top: 18%;
    bottom: 18%;
    left: 0;
    right: auto;
    height: auto;
    width: 3px;
    border-radius: 0 3px 3px 0;
  }
  .rodape-icone { font-size: 1.1rem; }
  .rodape-selo { position: static; transform: none; margin-left: auto; }

  /* A barra do topo existia só para carregar a marca e o "sair". Aqui a
     coluna carrega os dois — a marca no alto, a conta no pé — e a barra
     vira uma faixa vazia; então some. */
  .corpo-admin .admin-topo { display: none; }

  .coluna-marca {
    display: block;
    padding: 0.4rem 0.8rem 1.1rem;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.2rem;
    color: #FFFFFF;
  }
  /* `margin-top: auto` empurra a conta para o pé da coluna; a divisa acima
     separa utilitário de tarefa, como pede a régua */
  .coluna-conta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding: 0.7rem 0.6rem;
    border-top: 1px solid #263021;
    border-radius: 10px;
    text-decoration: none;
    color: #8B9B82;
    min-width: 0;
  }
  .coluna-conta:hover { background: #151B14; }
  .coluna-conta.ativa { background: #1A211A; color: #A8D096; }
  .coluna-conta.ativa .avatar-iniciais { background: #3F5A37; color: #F2F7EE; }
  .coluna-conta-texto {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.2;
  }
  .coluna-conta-texto strong,
  .coluna-conta-texto small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .coluna-conta-texto strong { color: #E8EFE2; font-weight: 600; }
  .coluna-conta.ativa .coluna-conta-texto strong { color: #F2F7EE; }
  .coluna-conta-texto small { font-size: 0.74rem; }
  /* na coluna o menu abre para CIMA do bloco, com a largura da coluna */
  .admin-rodape > .menu-conta { display: block; margin-top: auto; }
  .coluna-conta { margin-top: 0; }
  .admin-rodape .menu-conta .menu-conta-lista { bottom: calc(100% + 0.4rem); left: 0; right: 0; }
  /* o menu de ações NÃO é o da coluna: segue abrindo para baixo, encostado à
     direita da linha — a regra acima pegava os dois e empurrava a lista para
     fora da tela (Pedro viu em 13/09) */
  .menu-acoes .menu-conta-lista { top: calc(100% + 0.3rem); bottom: auto; left: auto; right: 0; }
  .menu-conta[open] > .coluna-conta { background: #1A211A; }

  .corpo-admin .admin-main {
    /* largura de tela grande: 48rem sobrava 430px de nada à direita */
    max-width: 74rem;
    margin: 0 0 0 15rem;
    padding: 1.6rem 2rem 3rem;
  }

  /* ── USUÁRIOS: o cartão vira LINHA ──────────────────────────────────────
     Mesmo markup, outro arranjo. Em cartão cabem três pessoas na tela; em
     linha, quinze — e num painel o que se faz é varrer a lista, não ler uma
     pessoa de cada vez. */
  .cabecalho-colunas {
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr 1.2fr auto;
    gap: 1rem;
    padding: 0 0.9rem 0.5rem;
    color: #6E7D66;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .corpo-admin .admin-item {
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr 1.2fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.35rem;
  }
  /* no catálogo: miniatura, espécie, uso, ficha, marcas */
  .cabecalho-colunas.colunas-catalogo,
  .corpo-admin .admin-item.item-catalogo { grid-template-columns: 48px 2.6fr 1.3fr 1.4fr 1.3fr; column-gap: 0.9rem; }
  .item-catalogo .celula-mini { grid-row: auto; }
  /* o rótulo existia para dar sentido ao valor solto no cartão; com o
     cabeçalho de colunas ele vira repetição */
  .corpo-admin .celula[data-rotulo]::before { content: none; }
  .celula-principal { display: flex; align-items: baseline; gap: 0.5rem; }
  .celula-principal strong { display: inline; }

  /* na fila de espera a recusa volta para a linha, longe do Aprovar mas sem
     ocupar uma faixa inteira */
  .bloco-espera .admin-item { grid-template-columns: 2.4fr 1fr 1fr auto auto; }
  .corpo-admin .admin-item-recusa {
    flex-basis: auto;
    margin: 0 0 0 1.5rem;
    padding: 0;
    border-top: 0;
  }

  /* ── E-MAILS: lista à esquerda, prévia à direita ───────────────────────
     Empilhado, escolher um template rolava a página e a lista sumia de
     vista. Lado a lado, troca-se sem sair do lugar — que é como Postmark e
     SendGrid fazem. */
  .aba-emails {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .lista-emails {
    grid-template-columns: 1fr;
    position: sticky;
    top: 1.5rem;
    margin-bottom: 0;
  }
  .previa-email { margin-bottom: 0; }
  .moldura-previa { height: 640px; }

  /* ── CONFIGURAÇÕES: dois cartões lado a lado ───────────────────────────
     São assuntos independentes — quem entra sabe qual quer, e empilhados
     obrigavam a rolar para descobrir que havia outro. */
  .aba-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.5rem;
    align-items: start;
  }
  .aba-config > .cartao { margin-bottom: 0; }
}

/* ── lugar do espaço (16/09) ─────────────────────────────────────────── */
.link-lugar { color: inherit; text-decoration: none; }
.link-lugar:hover { text-decoration: underline; }
.onde-fica .botao { display: block; text-align: center; text-decoration: none; margin-top: 0.6rem; }
.acoes-lugar { display: flex; gap: 1.2rem; margin-top: 0.4rem; }

/* casinha no mapa: redonda e clara, para não se confundir com a gota verde
   do avistamento — é um lugar seu, não uma planta de alguém */
.pin-casa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FDFBF4;
  border: 2px dashed var(--folha);
  font-size: 1.2rem;
  box-shadow: 0 3px 8px rgb(36 48 31 / 0.25);
  cursor: pointer;
}

/* marcar onde fica: o mapa ocupa a tela, o pino fica parado no centro dele
   com a PONTA no centro, e a barra embaixo diz o que fazer */
.marcar-lugar {
  position: relative;
  margin: -1rem -1rem 0;
}
.mapa-lugar { width: 100%; }
.pino-fixo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  font-size: 2.4rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 3px 3px rgb(36 48 31 / 0.35));
}
.barra-lugar {
  padding: 0.8rem 0 0;
  text-align: center;
}
.barra-lugar .botao { display: block; width: 100%; margin: 0.5rem 0 0.6rem; }
.clima-espaco { white-space: nowrap; }
.credito-dados { font-size: 0.72rem; color: var(--musgo); opacity: 0.8; margin-top: 0.2rem; }
.credito-dados a { color: inherit; }

/* ── páginas de texto: privacidade (16/09) ───────────────────────────── */
.pagina-texto {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  line-height: 1.55;
}
.pagina-texto h1 { font-family: var(--serif); color: var(--folha-escura); font-size: 1.7rem; margin: 0.4rem 0 0.2rem; }
.pagina-texto h2 { font-family: var(--serif); color: var(--folha-escura); font-size: 1.2rem; margin: 1.8rem 0 0.5rem; }
.pagina-texto p { margin: 0 0 0.8rem; }
.pagina-texto ul { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.pagina-texto li { margin-bottom: 0.6rem; }
.pagina-texto a { color: var(--folha); }
.pagina-voltar a { text-decoration: none; font-weight: 600; }
.entrada-rodape { margin-top: 1.6rem; font-size: 0.8rem; }
.entrada-rodape a { color: var(--musgo); }

/* entrada de um cartão só (16/09) */
.entrada-conta { font-size: 0.85rem; color: var(--musgo); margin: 0.9rem 0 0; }
.entrada-conta a { color: var(--folha); }
.link-codigo {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  color: var(--folha);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}
.aviso-codigo { font-size: 0.85rem; color: var(--musgo); text-align: center; margin-top: 0.4rem; }

/* ── entrada: a estufa (17/09, ilustração do Pedro) ─────────────────────
   Celular e tablet em pé: só a metade DIREITA, cobrindo a tela e presa
   embaixo, para o regador aparecer abaixo do cartão. Computador (largo e
   deitado): as duas metades, cada uma presa no seu lado, e o cartão no
   meio — a tela que o Pedro desenhou no Stitch. Fundo de CSS, não <img>:
   com media query o navegador só baixa a metade que vai mostrar. */
.entrada-estufa {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 0;
}
.estufa {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #F3F5E7;
  /* o degradê claro em cima abre espaço para o título e a frase: sem ele,
     as vigas da estufa e as orquídeas passavam por trás das letras (a
     cabeça tem altura fixa, por isso as paradas são em px) */
  background-image: url("/images/entrada/estufa-direita-137fede1ec04f5b92b1317adc438a6a0.svg?vsn=d");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 38% bottom;
}
.estufa-conteudo {
  position: relative;
  z-index: 1;
  padding: 2.6rem 1rem 1.5rem;
}
.entrada-estufa .entrada-titulo {
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  line-height: 1.05;
}

/* A MARCA em Press Start 2P (Pedro, 19/09) — só ela. A mesma cabeça serve
   para o nome da tela ("Código do autenticador"), e a fonte é de largura
   fixa e larga (~1em por caractere): uma frase inteira quebraria em três
   linhas. line-height folgado porque o 'g' desce e pixel cortado aparece.
   Tamanho medido para ocupar ~88% da cabeça em 320, 360, 390 e no desktop. */
.entrada-estufa .entrada-titulo-marca {
  font-family: "Press Start 2P", var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 8vw, 2.7rem);
  line-height: 1.35;
}
.entrada-estufa .entrada-sub { margin-bottom: 1.6rem; }
.entrada-estufa .cartao {
  box-shadow: 0 10px 30px rgb(36 48 31 / 0.14);
  border-color: rgb(220 227 208 / 0.9);
}
.estufa-rodape {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem 0.6rem;
  border-radius: 14px;
  background: rgb(243 245 231 / 0.88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.estufa-rodape .entrada-conta { margin: 0; }
.estufa-rodape .entrada-rodape { margin-top: 0.35rem; }

/* abelhas (17/09, pedido do Pedro): o invólucro PAIRA — sobe e desce
   devagar, com um leve balanço — e a imagem TREME rápido e pouco, como asa
   batendo. Cada uma com seu tempo, para não voarem em coro. As do lado
   esquerdo são espelhadas (`scale`, propriedade própria, que não briga com
   o `transform` das animações) para olhar para o formulário. Paradas para
   quem pediu menos movimento. */
.abelha { position: absolute; display: block; animation: pairar 3.2s ease-in-out infinite; }
.abelha img { display: block; width: 100%; height: auto; opacity: 0.95; animation: zumbir 0.22s ease-in-out infinite alternate; }
.abelha-virada img { scale: -1 1; }
@keyframes pairar {
  0%   { transform: translate(0, 0) rotate(-3deg); }
  25%  { transform: translate(2px, -7px) rotate(0deg); }
  50%  { transform: translate(0, -11px) rotate(3deg); }
  75%  { transform: translate(-2px, -5px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(-3deg); }
}
@keyframes zumbir {
  from { transform: translateY(0); }
  to   { transform: translateY(-1.2px); }
}
.abelha-3 { animation-duration: 3.5s; animation-delay: -2.2s; }
.abelha-3 img { animation-duration: 0.2s; }

/* no celular, contadas de BAIXO (em tela baixa o cartão desce até o meio):
   uma de cada lado, as duas olhando para o formulário */
.abelha-1 { width: 34px; bottom: 21%; right: 10%; }
.abelha-3 { width: 30px; bottom: 13%; left: 8%; }

@media (prefers-reduced-motion: reduce) {
  .abelha, .abelha img { animation: none; }
}

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  /* cartão maior no computador: a moldura cresce junto (Pedro, 17/09) */
  /* um quarto mais estreito que os 502 do simulador (Pedro, 17/09) */
  .entrada-estufa { --cartao-largura: 376px; }
  .estufa {
    /* clareira atrás do título; e, abaixo de 1440 px, as metades escapam
       pelas bordas em vez de se encontrarem no meio (em 1024 a samambaia
       pendurada ficava atrás do "Jardinago!") */
    --escape: min(0px, calc((100vw - 1440px) / 3));
    background-image:
      url("/images/entrada/estufa-esquerda-41e4806b64cb7e5a9b218d10c3583d0d.svg?vsn=d"),
      url("/images/entrada/estufa-direita-137fede1ec04f5b92b1317adc438a6a0.svg?vsn=d");
    background-size: auto 100%, auto 100%;
    background-position: left var(--escape) bottom, right var(--escape) bottom;
  }
  .estufa-conteudo { padding-top: 7vh; }
  .entrada-estufa .cartao { max-width: 400px; }
  /* no computador, contadas a partir do cartão (400 px no meio da tela),
     para nunca ficarem atrás dele: uma de cada lado. A terceira, embaixo à
     direita, saiu a pedido do Pedro (19/09). */
  .abelha-1 { width: 42px; bottom: auto; top: 30%; right: calc(50% - 290px); }
  .abelha-3 { width: 40px; bottom: auto; top: 46%; left: calc(50% - 300px); }
}

/* ── cartão da entrada com a moldura (17/09, ilustração do Pedro) ───────
   Duas metades (colchetes) presas às bordas do cartão, com a coluna de
   terracota de cada uma em cima da borda; o meio é a própria borda do
   cartão, e é isso que deixa a moldura esticar para os lados. As folhas
   passam POR FORA (translate pela própria largura da imagem). */
.cartao-moldura {
  position: relative;
  width: 100%;
  max-width: var(--cartao-largura, 24rem);
  margin: 0 auto;
}
/* MOLDURA EM PEÇAS (Pedro, 17/09, `Referência.svg`): quatro cantos presos
   aos cantos do cartão e duas barras que esticam no meio — o cartão muda de
   tamanho à vontade e a moldura acompanha.

   Todas as medidas vêm da referência, onde o cartão tem 579 × 758 e as peças
   estão em tamanho natural. `--u` é UM pixel daquele desenho, medido pela
   largura do cartão (unidade de container), então tudo escala junto:
     canto sup-esq  295×272 em (−88,41; −76,18) do canto do cartão
     canto sup-dir  291×206 em (+68 à direita; −71)
     canto inf-esq  337×552 em (−132,76; +83,21 abaixo)
     canto inf-dir  342×642 em (+150; +44)
     barra 18 de largura, encostada na borda; estica entre os cantos
     cantos do cartão: raio 51 */
.cartao-moldura {
  /* `--u` é UM pixel do desenho, e é FIXO (Pedro, 17/09: mudar a largura do
     cartão não pode mudar a escala das peças — elas só mudam de posição,
     presas aos cantos; quem estica é a barra). */
  --u: 0.6px;
  /* pontas das barras, achadas pelo Pedro no simulador (17/09) */
  --ini-esq: -208;
  --fim-esq: -204;
  --ini-dir: -102;
  --fim-dir: -300;
}
.canto, .barra {
  position: absolute;
  pointer-events: none;
}
.canto { width: auto; height: auto; z-index: 3; }
.canto-sup-esq {
  width: calc(295 * var(--u));
  left: calc(-88.41 * var(--u));
  top: calc(-76.18 * var(--u));
}
.canto-sup-dir {
  width: calc(291 * var(--u));
  right: calc(-68 * var(--u));
  top: calc(-71 * var(--u));
}
.canto-inf-esq {
  width: calc(337 * var(--u));
  left: calc(-132.76 * var(--u));
  bottom: calc(-83.21 * var(--u));
}
.canto-inf-dir {
  width: calc(342 * var(--u));
  right: calc(-150 * var(--u));
  bottom: calc(-44 * var(--u));
}
/* A BARRA liga a coluna do canto de CIMA à do canto de BAIXO do seu lado, e
   é ela que absorve a altura do cartão. Largura fixa (18 do desenho): ela só
   estica na vertical.
   Início e fim são medidos PELAS PEÇAS daquele lado (Pedro, 17/09):
     esquerda — o canto de cima termina a 195,82 do topo do cartão
                (−76,18 + 272) e o de baixo começa a 468,79 da base
                (552 − 83,21)
     direita  — 135 do topo (−71 + 206) e 598 da base (642 − 44)
   `--ini-*` e `--fim-*` são o ajuste fino em cima disso: 0 = encostado na
   peça, negativo = entra por baixo dela. */
.barra {
  z-index: 2;
  width: calc(18 * var(--u));
  /* a tira tem 2 px de altura de propósito: estica sem deformar nada */
  background: url("/images/entrada/barra-lateral-dd81749110e5bc1b7513320ea23211d2.svg?vsn=d") center / 100% 100% no-repeat;
}
.barra-esq {
  left: calc(-18 * var(--u));
  top: calc((195.82 + var(--ini-esq, 0)) * var(--u));
  bottom: calc((468.79 + var(--fim-esq, 0)) * var(--u));
}
.barra-dir {
  right: calc(-18 * var(--u));
  top: calc((135 + var(--ini-dir, 0)) * var(--u));
  bottom: calc((598 + var(--fim-dir, 0)) * var(--u));
}

.form-estufa {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* em cartão curto (o piso de 15 rem) o conteúdo fica no meio; em cartão
     cheio não muda nada */
  justify-content: center;
  /* A ALTURA VEM DO CONTEÚDO (Pedro, 17/09): a moldura se ajusta sozinha,
     então quem manda é a distribuição dos campos, e não um número fixo. */
  background: #FFFFFF;
  border: 0;
  border-radius: calc(51 * var(--u));
  /* o respiro lateral é proporcional à largura; era grande demais (sobra de
     quando a folha da moldura antiga entrava no cartão) */
  padding: 2.6rem 9% 2.2rem;
  /* piso: abaixo de ~200 px a barra da direita sumiria e abriria um vão na
     moldura — a tela do código, de uma linha só, chega perto disso */
  min-height: 15rem;
  gap: 1.7rem;
  box-shadow: 0 10px 28px rgb(36 48 31 / 0.14);
}
/* alturas e respiros do SVG: campos e botão com 88 px de 621 (14,2%), e o
   primeiro campo respirando mais que o segundo (83 px contra 39) */
/* os campos são os do app (rótulo em cima, campo arredondado): só o
   respiro é próprio desta tela. O texto alinha à esquerda, como no cartão
   do app — a tela de entrada centraliza tudo por padrão. */
.form-estufa { text-align: left; }
.form-estufa label { margin-bottom: 0; }
.form-estufa .botao { margin-top: 0.4rem; }

/* "Esqueci a senha" logo abaixo do campo, alinhado à direita com ele — é
   onde as pessoas procuram. No HTML ele vem depois do "Entrar" (o Enter
   aciona o primeiro botão de envio); aqui o flex inverte a ordem. */
.form-estufa .link-codigo {
  order: 1;
  align-self: flex-end;
  width: auto;
  margin: -0.5rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  text-align: right;
}
.form-estufa .botao { order: 2; }

/* só para leitor de tela */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* o conteúdo da entrada fica no CENTRO da página (Pedro, 17/09) */
.entrada-estufa .estufa-conteudo {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.entrada-estufa .estufa-conteudo > * { width: 100%; max-width: var(--cartao-largura, 24rem); }
/* a cabeça não se prende à largura do cartão: com o cartão estreito,
   "Digite o código" quebrava em duas linhas */
.entrada-estufa .estufa-cabeca { max-width: min(30rem, 100%); }
.estufa-rodape { margin-top: 1.4rem; }

/* o título leva o próprio halo: com o formulário no centro da tela, ele cai
   em cima das orquídeas, e uma faixa clara presa no topo não o acompanha */
/* respiro maior entre a cabeça e o cartão (Pedro, 19/09), e um pouco mais
   ainda no computador, onde sobra tela */
.estufa-cabeca {
  position: relative;
  padding: 0.6rem 0 2.3rem;
}
@media (min-width: 900px) {
  .estufa-cabeca { padding-bottom: 3.1rem; }
}
.estufa-cabeca::before {
  content: "";
  position: absolute;
  inset: -12% -14%;
  background: radial-gradient(ellipse at center, rgb(243 245 231 / 0.95) 45%, rgb(243 245 231 / 0) 75%);
  z-index: -1;
}

/* as folhas da moldura passam da borda da tela: cortar é melhor que criar
   rolagem lateral no celular */
.entrada-estufa { overflow-x: clip; }

/* no celular a moldura é mais discreta: menor e mais para fora, senão as
   folhas cobrem o olhinho e os campos */
@media (max-width: 899px) {
  /* na largura do celular a moldura inteira não cabe fora do cartão: ela
     encolhe e encosta mais no cartão */
  /* No celular a moldura INTEIRA cabe na tela (Pedro, 17/09) mudando SÓ a
     escala: a geometria é a da referência, senão os cantos saem do lugar
     em relação às barras. Com --u 0,3: 40 px de peça para fora à esquerda
     e 45 à direita, e o cartão deixa essa folga. */
  /* no celular o conteúdo sobe: a marca fica no topo e o cartão logo
     abaixo, com o mesmo respiro. Embaixo sobra a estufa — o regador e as
     abelhas aparecem (Pedro, 17/09). */
  .entrada-estufa .estufa-conteudo {
    justify-content: flex-start;
    padding-top: 1.6rem;
  }
  .cartao-moldura { --u: 0.3px; }
  .entrada-estufa { --cartao-largura: min(20rem, calc(100vw - 6.5rem)); }
  /* no celular a proporção do SVG deixaria os campos com ~40 px de altura:
     pequenos demais para o dedo. O cartão cresce com o conteúdo e os
     respiros continuam proporcionais à largura; a moldura acompanha. */
  .form-estufa {
    padding: 2rem 8% 1.8rem;
    gap: 1.1rem;
  }
  .form-estufa .link-codigo { font-size: 0.85rem; }
}

/* Tela BAIXA (iPhone SE e afins, ~568 px de altura): sem isto o conteúdo
   passava de 627 px e a página rolava, mesmo com tudo "cabendo" numa tela
   de 844. Aperta os respiros, encolhe o título e deixa a moldura um pouco
   menor — o cartão ganha largura e o link para de quebrar em duas linhas. */
@media (max-width: 899px) and (max-height: 720px) {
  .entrada-estufa .estufa-conteudo { padding-top: 0.7rem; }
  /* aqui o respiro maior NÃO cabe: no iPhone SE ele trazia de volta 24 px
     de rolagem no pedir código. Em tela baixa o respiro continua o antigo,
     e a marca ganha entrelinha justa. */
  /* 1 px de conteúdo a mais já faz a página rolar aqui (pedir código no
     iPhone SE): o respiro de baixo do contêiner cede o que falta */
  .entrada-estufa .estufa-conteudo { padding-bottom: 0.8rem; }
  .estufa-cabeca { padding: 0.2rem 0 0.25rem; }
  .entrada-estufa .entrada-titulo { font-size: clamp(2rem, 9vw, 3rem); }
  .entrada-estufa .entrada-titulo-marca {
    font-size: clamp(1.4rem, 7.4vw, 1.9rem);
    line-height: 1.1;
  }
  .cartao-moldura { --u: 0.26px; }
  .entrada-estufa { --cartao-largura: min(20rem, calc(100vw - 5.5rem)); }
  .form-estufa { padding: 1.6rem 8% 1.4rem; gap: 0.9rem; min-height: 12rem; }
  .estufa-rodape { margin-top: 0.8rem; padding: 0.4rem 0.9rem 0.5rem; }
}

/* o link da privacidade: discreto no computador, preso embaixo no celular,
   em branco sobre a folhagem — só o texto, sem caixa (Pedro, 17/09) */
.estufa-privacidade { margin-top: 1rem; font-size: 0.8rem; text-align: right; }
.estufa-privacidade a { color: var(--musgo); }

/* No computador (Pedro, 19/09): quem fica no centro da tela é o CARTÃO, e a
   marca sobe para o topo — por isso ela sai do fluxo, senão empurra o cartão
   para baixo do centro. E a Política de Privacidade se prende embaixo, ao
   centro: as peças de baixo da moldura passam do cartão e cobriam o link,
   que ficava a 1 rem dali. */
@media (min-width: 900px) and (min-height: 700px) {
  /* com a cabeça fora do fluxo, o respiro de cima do contêiner só serviria
     para empurrar o cartão para baixo do centro (eram 26 px de desvio) */
  .entrada-estufa .estufa-conteudo { position: relative; padding-top: 1.5rem; }
  .entrada-estufa .estufa-cabeca {
    position: absolute;
    top: 2.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(30rem, 100%);
  }
  .entrada-estufa .estufa-privacidade {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.2rem;
    width: auto;
    max-width: none;
    margin: 0;
    text-align: center;
    z-index: 3;
  }
}
@media (max-width: 899px) {
  .estufa-privacidade {
    /* preso embaixo, mas alinhado pela BORDA DO CARTÃO, não pela da tela
       (Pedro, 17/09): mesma largura do cartão, centrada, texto à direita */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: var(--cartao-largura, 20rem);
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    margin: 0;
    z-index: 3;
  }
  .estufa-privacidade a {
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgb(20 30 15 / 0.65);
  }
}

/* título dentro do cartão: as telas que explicam o que são (pedir acesso,
   por exemplo) dizem isso aqui, e não na cabeça — assim a marca fica no
   lugar e o cartão não pula ao mudar de estado */
.titulo-cartao {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--folha-escura);
  margin-bottom: 0.2rem;
}
/* os dois estados têm a MESMA altura (a do maior, o formulário): o cartão
   não sai do lugar quando o pedido é enviado */
/* os dois estados com a MESMA altura, senão o cartão sobe ou desce ao
   enviar (no computador o conteúdo é centrado). O valor muda por tela
   porque o texto quebra em mais linhas no celular. */
.form-pedir { min-height: 26.5rem; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .form-pedir { min-height: 28.6rem; }
}

/* "Não tem conta?" dentro do cartão, abaixo do botão, com uma linha
   discreta separando (Pedro, 17/09) */
.conta-no-cartao {
  order: 3;
  margin: 0.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: 0.85rem;
  color: var(--musgo);
}
.conta-no-cartao a { color: var(--folha); font-weight: 600; }
/* no cartão que é só texto (pedido enviado) o "order" não vale: o espaço
   vem da margem */
section.form-estufa .conta-no-cartao { margin-top: 1.2rem; }