/* cadcliente.maestrello.tech — estilos do formulário sobre o DS Maestrello Tech.
   Só usa tokens de papel (--ink, --accent, --risk, --line…) para respeitar os dois temas. */

body { background: var(--ground); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }

/* atmosfera sutil no fundo (dark-first) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(680px 340px at 88% -4%, color-mix(in srgb, var(--sapphire) 14%, transparent), transparent 70%),
    radial-gradient(560px 320px at 4% 8%, color-mix(in srgb, var(--marsala) 16%, transparent), transparent 72%);
}

/* header */
.app-header { border-bottom: 1px solid var(--line); }
.theme-toggle { white-space: nowrap; }

/* container da página: mais estreito que o app (é um formulário) */
.page { max-width: 760px; padding-top: 32px; padding-bottom: 56px; flex: 1 0 auto; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* painel do formulário */
.form-panel { padding: clamp(20px, 4vw, 34px); }
.form-panel > h1 { margin: 6px 0 10px; }
.form-panel > .lead { margin-bottom: 8px; }

.form-section { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-section:first-of-type { margin-top: 26px; }
.section-label {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 16px;
}
.section-label .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* espaçamento entre campos empilhados */
.form-section .field + .field,
.form-section .grid-2 + .field,
.form-section .field + .grid-2,
.form-section .grid-2 + .grid-2 { margin-top: 16px; }

/* erros de campo */
.err { color: var(--risk); font-size: 12.5px; min-height: 1em; }
.input.invalid, .select.invalid, .textarea.invalid,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--risk); }

/* LGPD */
.check-lgpd { align-items: flex-start; gap: 12px; line-height: 1.5; }
.check-lgpd input { margin-top: 2px; flex: 0 0 auto; }
.lgpd { margin-top: 12px; }

/* botão / erro geral */
#btn-enviar { margin-top: 30px; }
.form-error { margin-top: 14px; color: var(--risk); font-size: 14.5px; }

/* telas de status (inválido / sucesso) */
.status-panel { text-align: center; max-width: 560px; margin: 24px auto; }
.status-emblem { display: flex; justify-content: center; margin-bottom: 8px; }
.status-panel h2 { margin: 6px 0 12px; }
.status-panel .lead { margin: 0 auto 22px; }
.status-panel .btn { margin-top: 6px; }
.mapa { margin-top: 22px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.mapa iframe { display: block; width: 100%; height: 220px; border: 0; }

/* rodapé */
.rodape { border-top: 1px solid var(--line); background: var(--ground-2); padding: 30px 0; margin-top: auto; }
.rodape .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.foot-lines { font-size: 13px; line-height: 1.7; color: var(--ink-muted); margin: 0; }
.foot-lines strong { color: var(--ink); }

/* utilitário */
.hidden { display: none !important; }

/* mobile: colapsa as duas colunas */
@media (max-width: 620px) {
  .grid-2 { grid-template-columns: 1fr; gap: 16px; }
  .page { padding-top: 22px; }
}