/* ==== Estilo isolado do formulário ==== */
.procon-wrap * { box-sizing: border-box; }
.procon-wrap {
max-width: 760px; margin: 24px auto; background: #fff;
border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
padding: 26px 32px; font-family: “Segoe UI”, Roboto, Arial, sans-serif;
}
.procon-header { text-align: center; margin-bottom: 20px; }
.procon-header img { height: 80px; display:block; margin: 0 auto 8px; }
.procon-header h2 { margin: 0; font-size: 22px; color: #1565c0; }
.procon-label { display:block; margin-top:14px; font-weight:600; }
.procon-input, .procon-select {
width:100%; padding:10px; border:1px solid #cfd4dc; border-radius:8px; margin-top:6px; font-size:15px;
}
.procon-input[readonly] { background:#f6f7f9; }
.procon-help { font-size:13px; color:#c62828; display:none; }
.procon-checkbox { margin-top:16px; display:flex; gap:10px; align-items:flex-start; }
.procon-btn {
margin-top:20px; background:#1565c0; color:#fff; border:none; border-radius:8px; padding:12px 18px;
font-size:16px; cursor:pointer;
}
.procon-btn:hover { background:#0d47a1; }
.procon-success { display:none; text-align:center; margin-top:22px; }
.procon-success h3 { color:#2e7d32; margin-bottom:8px; }
/* ===== Lógica JS pura (sem libs) ===== */
const nascEl = document.getElementById(‘nascimento’);
const idadeEl = document.getElementById(‘idade’);
const menorAviso = document.getElementById(‘menorAviso’);
const respBox = document.getElementById(‘respBox’);
const respInput = document.getElementById(‘responsavel’);
const telEl = document.getElementById(‘telefone’);
const formEl = document.getElementById(‘proconForm’);
const successEl = document.getElementById(‘proconSuccess’);
const protoOut = document.getElementById(‘protoOut’);
const idAutoHidden = document.getElementById(‘entry_id_auto’);
let proconSubmitted = false;
/* Máscara simples de telefone (BR) */
telEl.addEventListener(‘input’, () => {
let v = telEl.value.replace(/\D/g,”).slice(0,11);
if (v.length > 6) telEl.value = `(${v.slice(0,2)}) ${v.slice(2,7)}-${v.slice(7)}`;
else if (v.length > 2) telEl.value = `(${v.slice(0,2)}) ${v.slice(2)}`;
else if (v.length > 0) telEl.value = `(${v}`;
else telEl.value = ”;
});
/* Calcula idade e alterna campo do responsável */
nascEl.addEventListener(‘change’, () => {
const n = new Date(nascEl.value);
const h = new Date();
let anos = h.getFullYear() – n.getFullYear();
const m = h.getMonth() – n.getMonth();
if (m < 0 || (m === 0 && h.getDate() = 0) ? anos : ”;
if (anos >= 0 && anos {
if (proconSubmitted) {
formEl.style.display = ‘none’;
successEl.style.display = ‘block’;
proconSubmitted = false;
}
});
/* Nova inscrição */
function proconNova() {
formEl.reset();
idadeEl.value = ”;
menorAviso.style.display = ‘none’;
respBox.style.display = ‘none’;
successEl.style.display = ‘none’;
formEl.style.display = ‘block’;
}
