/* Modal de pré-cadastro das landing pages — FONTE ÚNICA.
   Antes o CSS estava duplicado em 9 lugares (6 styles.css + inline na home + inline
   no /diagnosticos + bloco duplicado no limpa-bacen). Este arquivo substitui todos.

   Visual alinhado ao app (/app): tokens em CSS vars, tema CLARO por padrão (as LPs
   são claras, #f5f7fa) e ESCURO ativável via #modalPreCadastro[data-theme="dark"].
   NÃO segue automaticamente o cv_theme do app: modal escuro sobre LP clara recriaria
   o desalinhamento que estamos corrigindo.

   Tudo escopado sob #modalPreCadastro; as classes (.chip/.toggle-btn/.form-error) são
   globais no projeto — não vazar. Nomes de classe e estados (.active/.selected)
   preservados: public/js/m4x8k2p.js depende deles. */

#modalPreCadastro {
  /* Tema claro (padrão) — espelha public/app/src/index.css (html.light) */
  --dn-surface: #ffffff;
  --dn-surface-2: #eef7f2;
  --dn-border: #e2ddd5;
  --dn-fg: #0a1a12;
  --dn-muted: #718096;
  --dn-primary: #0a5c36;
  --dn-primary-fg: #eafdf3;
  --dn-primary-hover: #0c6b3f;
  --dn-danger: #c1392b;
  --dn-placeholder: #9aa5a0;
}

#modalPreCadastro[data-theme="dark"] {
  /* Tema escuro (app html.dark / :root) */
  --dn-surface: #0f2019;
  --dn-surface-2: #0c2618;
  --dn-border: #1e3328;
  --dn-fg: #d6f5e3;
  --dn-muted: #7eab8e;
  --dn-primary: #17e1a8;
  --dn-primary-fg: #06281f;
  --dn-primary-hover: #14c594;
  --dn-danger: #f87171;
  --dn-placeholder: #5a6478;
}

#modalPreCadastro.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  padding: 16px;
  backdrop-filter: blur(4px);
}

#modalPreCadastro .modal-box {
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 28px;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  animation: modalPreIn 0.25s ease-out;
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: var(--dn-primary) var(--dn-surface-2);
}

#modalPreCadastro .modal-box::-webkit-scrollbar {
  width: 8px;
}
#modalPreCadastro .modal-box::-webkit-scrollbar-track {
  background: var(--dn-surface-2);
  border-radius: 8px;
}
#modalPreCadastro .modal-box::-webkit-scrollbar-thumb {
  background: var(--dn-primary);
  border-radius: 8px;
}

@keyframes modalPreIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#modalPreCadastro .modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--dn-muted);
  font-size: 28px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}

#modalPreCadastro .modal-close:hover {
  color: var(--dn-fg);
}

#modalPreCadastro .modal-title {
  color: var(--dn-fg);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px 0;
  padding-right: 30px;
}

#modalPreCadastro .modal-subtitle {
  color: var(--dn-muted);
  font-size: 14px;
  margin: 0 0 24px 0;
}

#modalPreCadastro .modal-form .form-group {
  margin-bottom: 20px;
}

#modalPreCadastro .modal-form .form-group label {
  display: block;
  color: var(--dn-muted);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#modalPreCadastro .modal-form input[type="text"],
#modalPreCadastro .modal-form input[type="email"],
#modalPreCadastro .modal-form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--dn-surface-2);
  border: 1.5px solid var(--dn-border);
  border-radius: 12px;
  color: var(--dn-fg);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

#modalPreCadastro .modal-form input::placeholder {
  color: var(--dn-placeholder);
}

#modalPreCadastro .modal-form input[type="text"]:focus,
#modalPreCadastro .modal-form input[type="email"]:focus,
#modalPreCadastro .modal-form input[type="tel"]:focus {
  border-color: var(--dn-primary);
}

#modalPreCadastro .form-error {
  color: var(--dn-danger);
  font-size: 12px;
  margin-top: 4px;
  display: block;
  min-height: 16px;
}

/* Toggle Sim/Não */
#modalPreCadastro .toggle-group {
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--dn-border);
}

#modalPreCadastro .toggle-btn {
  flex: 1;
  padding: 10px 16px;
  background: var(--dn-surface-2);
  border: none;
  color: var(--dn-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

#modalPreCadastro .toggle-btn.active {
  background: var(--dn-primary);
  color: var(--dn-primary-fg);
}

#modalPreCadastro .toggle-btn:first-child {
  border-right: 1px solid var(--dn-border);
}

/* Chips */
#modalPreCadastro .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#modalPreCadastro .chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}

/* radio E checkbox (os objetivos são radio — antes o input aparecia) */
#modalPreCadastro .chip input {
  display: none;
}

#modalPreCadastro .chip span {
  display: inline-block;
  padding: 8px 14px;
  background: var(--dn-surface-2);
  border: 1.5px solid var(--dn-border);
  border-radius: 999px;
  color: var(--dn-fg);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  user-select: none;
}

#modalPreCadastro .chip:hover span {
  border-color: var(--dn-primary);
  color: var(--dn-fg); /* neutraliza o color:#fff do CSS antigo (invisível no claro) */
}

#modalPreCadastro .chip.selected span,
#modalPreCadastro .chip input:checked + span {
  background: var(--dn-primary);
  border-color: var(--dn-primary);
  color: var(--dn-primary-fg);
  font-weight: 600;
}

/* Submit */
#modalPreCadastro .modal-submit {
  width: 100%;
  padding: 14px 24px;
  background: var(--dn-primary);
  color: var(--dn-primary-fg);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s;
  margin-top: 24px;
}

#modalPreCadastro .modal-submit:hover {
  background: var(--dn-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* sobrepõe a sombra menta do CSS antigo */
}

#modalPreCadastro .modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

#modalPreCadastro .modal-submit i {
  font-size: 20px;
}

@media (max-width: 480px) {
  #modalPreCadastro .modal-box {
    padding: 24px 20px;
    border-radius: 16px;
    max-height: 95vh;
  }
  #modalPreCadastro .modal-title { font-size: 18px; }
  #modalPreCadastro .chip span { padding: 7px 12px; font-size: 12px; }
}