/* ───────────────────────────────────────────────────────────────────────────
   Estilo comum às páginas de formulário — ficha de pré-consulta e avaliação
   floral. Só o que as duas usam; o que é de uma continua no <style> dela.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Abertura ─────────────────────────────────────────────────────────────── */
.capa { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.capa h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 1.25rem; }
.capa .conduz { font-size: clamp(1.0625rem, .5vw + 1rem, 1.2rem); color: var(--tinta-media); max-width: 52ch; }

/* O aviso de que nada sai daqui sozinho é a primeira coisa que se lê. Quem
   preenche dado de saúde quer saber para onde ele vai antes de escrever. */
.selo {
  border: 1px solid var(--linha); border-left: 3px solid var(--verde);
  background: color-mix(in srgb, var(--verde-claro) 32%, var(--osso));
  padding: 1.1rem 1.35rem; margin-top: 2rem; max-width: 62ch;
}
.selo p { margin: 0; font-size: .95rem; color: var(--tinta-media); }
.selo p + p { margin-top: .6rem; }
.selo b { color: var(--tinta); font-weight: 500; }

/* ── Blocos do formulário ─────────────────────────────────────────────────── */
form { padding-bottom: clamp(3rem, 6vw, 5rem); }
fieldset { border: 0; margin: 0 0 clamp(2.75rem, 6vw, 4.5rem); padding: 0; min-width: 0; }
legend { padding: 0; }

.campo { padding-block: 1.15rem; border-top: 1px solid var(--linha); display: grid; gap: .55rem; }
.campo > label, .campo > .rot { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--tinta); }
.campo .dica { font-family: var(--sans); font-size: .75rem; color: var(--tinta-fraca); line-height: 1.5; margin: 0; max-width: 58ch; }
.exigido { color: var(--verde); font-weight: 400; }

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--tinta);
  background: #fff; border: 1px solid var(--linha); border-radius: .4rem;
  padding: .7rem .85rem; width: 100%; max-width: 34rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { max-width: 44rem; line-height: 1.55; resize: vertical; }
input:focus-visible, textarea:focus-visible {
  outline: 0; border-color: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 16%, transparent);
}
input[type=number] { max-width: 9rem; }

/* ── Pílulas de escolha ───────────────────────────────────────────────────── */
/* O input real fica escondido e é o <label> que vira alvo: assim a área de
   toque é a pílula inteira, e não o círculo de 13px que o navegador desenha. */
.opcoes { display: flex; gap: .5rem; }
.opcoes.envolve { flex-wrap: wrap; }
.opcoes label {
  font-family: var(--sans); font-size: .8125rem; font-weight: 500;
  border: 1px solid var(--linha); border-radius: 100px; background: #fff;
  padding: .45rem 1.1rem; cursor: pointer; color: var(--tinta-media);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.opcoes input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcoes label:has(input:checked) { background: var(--verde); border-color: var(--verde); color: #fff; }
.opcoes label:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent); }

/* ── Termos e aceites ─────────────────────────────────────────────────────── */
.termo { border: 1px solid var(--linha); background: #fff; padding: 1.25rem 1.4rem; max-width: 62ch; }
.termo p { font-size: .95rem; color: var(--tinta-media); margin: 0; }
.aceite { display: flex; gap: .8rem; align-items: flex-start; margin-top: 1rem; cursor: pointer; max-width: 62ch; }
.aceite input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--verde); }
.aceite span { font-family: var(--sans); font-size: .9rem; line-height: 1.55; }

/* O caminho da urgência continua escrito, mas em nota de rodapé, não em caixa
   de alerta. Numa ficha que gestante preenche em casa, uma tarja cor de aviso
   com lista de sintomas assusta mais do que informa — e o que era para ser
   ajuda vira o motivo de fechar a página. O texto ficou com o que serve: para
   onde ir. */
.nota-rodape { margin-top: 2rem; max-width: 62ch; font-family: var(--sans); font-size: .8125rem; line-height: 1.65; color: var(--tinta-fraca); border-top: 1px solid var(--linha); padding-top: 1rem; }

/* ── Envio ────────────────────────────────────────────────────────────────── */
.envio { border-top: 1px solid var(--linha); padding-top: 2rem; margin-top: 1rem; }
.erros { border: 1px solid #d9a679; background: #fdf3e8; padding: 1rem 1.25rem; margin-bottom: 1.5rem; max-width: 62ch; }
.erros p { margin: 0 0 .5rem; font-family: var(--sans); font-size: .85rem; font-weight: 500; color: #6b4a2c; }
.erros ul { margin: 0; padding-left: 1.1rem; font-family: var(--sans); font-size: .85rem; color: #6b4a2c; }
.erros li { margin-top: .2rem; }
.erros a { color: inherit; }

.pronto { border: 1px solid var(--linha); border-left: 3px solid var(--verde); background: #fff; padding: 1.35rem 1.5rem; max-width: 44rem; }
.pronto h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.pronto p { font-size: .95rem; color: var(--tinta-media); }
.pronto textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; max-width: none; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* Os dois caminhos de envio, lado a lado. `grid-cols-1` na base porque a 320px
   dois botões numa linha só espremem o rótulo até quebrar no meio da palavra. */
.acoes-envio { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 30rem) { .acoes-envio { display: flex; flex-wrap: wrap; } }

/* O recado da ficha comprida. Estava escrito em `style=` nas duas páginas, o
   que é exatamente como as duas passam a discordar na primeira correção. */
/* Os estados de envio. O "enviando" precisa de espaço próprio para a linha não
   pular quando ela troca pelo "recebido" — texto que pula parece erro. */
.estado-envio { min-height: 5.5rem; }
.estado-envio p { margin-bottom: .5rem; }
.miudo-envio { font-size: .875rem; color: var(--tinta-fraca); }
.miudo-envio a { color: inherit; }

.recado-longo {
  font-size: .9rem; color: #6b4a2c;
  border-left: 3px solid var(--argila); background: #fdf3e8;
  padding: .85rem 1.1rem; margin-bottom: 1rem;
}

[hidden] { display: none !important; }