Bollo Auto e Superbollo 2026: Guida Completa a Calcolo, Scadenze, Esenzioni e Sanzioni

/* Scoped CSS per non rompere il sito */ .bollo-calculator-wrapper { font-family: 'Montserrat', sans-serif; /* Assicurati che il font sia caricato dal sito */ box-sizing: border-box; } .bollo-calculator-wrapper * { box-sizing: border-box; } .bollo-calculator { max-width: 800px; margin: 30px auto; background: hsl(240, 100%, 99%); border-radius: 20px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Aggiunta ombra per staccarlo dal fondo */ } .calculator-header { text-align: center; margin-bottom: 35px; } .calculator-header h2 { font-size: 24px; font-weight: 700; margin-bottom: 10px; color: #333; } .calculator-header p { font-size: 16px; opacity: 0.6; color: #555; } .bollo-calculator .form-group { margin-bottom: 25px; } .bollo-calculator label { display: block; font-size: 16px; opacity: 0.8; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.5px; color: #333; } .bollo-calculator input, .bollo-calculator select { width: 100%; padding: 15px; font-size: 16px; border: 1px solid hsl(0, 0%, 90%); border-radius: 10px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; color: #333; } .bollo-calculator input:focus, .bollo-calculator select:focus { outline: none; background: white; box-shadow: 0 0 0 3px rgba(0, 0, 192, 0.1); border-color: #0000c0; } .power-unit-selector { display: flex; gap: 10px; margin-bottom: 12px; } .unit-btn { flex: 1; padding: 12px; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 8px; background: hsl(240, 100%, 97%); color: hsl(240, 100%, 65%); cursor: pointer; transition: all 0.3s ease; } .unit-btn:hover { background: hsl(240, 100%, 95%); transform: translateY(-2px); color: hsl(240, 100%, 50%); } .unit-btn.active { background: linear-gradient(135deg, #0000c0, #0000ff); color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .conversion-hint { margin-top: 8px; padding: 10px 15px; background: hsl(240, 100%, 97%); border-radius: 8px; font-size: 14px; color: hsl(240, 100%, 40%); display: flex; border: 1px solid hsl(240, 100%, 88%); align-items: center; gap: 8px; } .info-alert { margin: 0px 0px 30px 0px; padding: 15px; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.5); border-radius: 10px; display: flex; align-items: flex-start; animation: slideDown 0.3s ease; color: #333; } .info-alert.elettrica { background: rgba(76, 175, 80, 0.1); border-color: rgba(76, 175, 80, 0.5); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .alert-icon { font-size: 24px; flex-shrink: 0; margin-right: 10px; } .alert-text { font-size: 14px; line-height: 1.6; } .alert-text strong { display: block; font-weight: 600; margin-bottom: 2px; } .calculate-btn { width: 100%; padding: 18px; font-size: 18px; font-weight: 700; color: white; background: linear-gradient(135deg, #0000c0, #0000ff); border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; } .calculate-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); } .result-container { margin-top: 35px; padding: 30px; background: white; border-radius: 15px; border: 1px solid rgba(0,0,0,0.05); display: none; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .result-container.show { display: block; animation: slideIn 0.5s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid hsl(0, 0%, 92%); color: #333; } .result-item:last-child { border-bottom: none; } .result-label { font-size: 16px; font-weight: 400; } .result-value { font-size: 18px; font-weight: bold; } .result-label-superbollo { font-size: 16px; color: #d89e00; font-weight: 600; } .result-value-superbollo { font-size: 18px; color: #d89e00; font-weight: bold; } .total-result { margin-top: 20px; padding: 25px; background: #f8f9fa; border-radius: 12px; text-align: center; color: #333; } .total-label { font-size: 16px; margin-bottom: 5px; } .total-value { font-size: 42px; font-weight: 700; color: #0000c0; } .superbollo-alert { margin-top: 20px; padding: 20px; color: #856404; background: #fff3cd; border: 1px solid #ffeeba; border-radius: 12px; text-align: center; animation: pulse 2s infinite; display: flex; align-items: center; justify-content: center; gap: 10px; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } } .info-note { margin-top: 20px; padding: 20px; background: hsl(240, 100%, 98%); border-radius: 10px; font-size: 13px; line-height: 1.6; opacity: 0.9; color: #666; } /* Stile specifico per l'esenzione verde */ .esenzione-elettrica { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important; border-color: #a5d6a7 !important; color: #2e7d32 !important; animation: none !important; text-align: left !important; justify-content: flex-start !important; } .esenzione-elettrica .icon { font-size: 24px; margin-right: 15px; } @media (max-width: 768px) { .bollo-calculator { padding: 25px; margin: 20px 0; } .calculator-header h2 { font-size: 22px; } .total-value { font-size: 32px; } } (function() { // Funzione auto-eseguibile per isolare le variabili let currentUnit = 'cv'; const CV_TO_KW = 0.735499; const tariffeRegionali = { 'abruzzo': { fino100: 3.12, oltre100: 4.69 }, 'veneto': { fino100: 2.84, oltre100: 4.26 }, 'lazio': { fino100: 2.84, oltre100: 4.26 }, 'liguria': { fino100: 2.84, oltre100: 4.26 }, 'calabria': { fino100: 2.90, oltre100: 4.35 }, 'campania': { fino100: 2.90, oltre100: 4.35 }, 'toscana': { fino100: 2.90, oltre100: 4.35 }, 'marche': { fino100: 2.79, oltre100: 4.19 }, 'default': { fino100: 2.58, oltre100: 3.87 } }; const tariffeEuro = { '0': { fino100: 3.00, oltre100: 4.50 }, '1': { fino100: 2.90, oltre100: 4.35 }, '2': { fino100: 2.80, oltre100: 4.20 }, '3': { fino100: 2.70, oltre100: 4.05 }, '4': null, '5': null, '6': null }; window.handleAlimentazioneChange = function() { const alimentazione = document.getElementById('alimentazione').value; const alertIbrida = document.getElementById('alertIbrida'); const alertElettrica = document.getElementById('alertElettrica'); alertIbrida.style.display = 'none'; alertElettrica.style.display = 'none'; if (alimentazione === 'ibrida') { alertIbrida.style.display = 'flex'; } else if (alimentazione === 'elettrica') { alertElettrica.style.display = 'flex'; } } window.switchPowerUnit = function(unit) { currentUnit = unit; document.querySelectorAll('.unit-btn').forEach(btn => { btn.classList.remove('active'); }); document.querySelector(`[data-unit="${unit}"]`).classList.add('active'); const potenzaInput = document.getElementById('potenza'); const conversionText = document.getElementById('conversionText'); if (unit === 'cv') { potenzaInput.placeholder = 'es. 136'; conversionText.textContent = 'Inserisci i cavalli della tua auto'; } else { potenzaInput.placeholder = 'es. 100'; conversionText.textContent = 'Inserisci i kilowatt della tua auto'; } updateConversionHint(); } function updateConversionHint() { const potenzaInput = document.getElementById('potenza'); const conversionText = document.getElementById('conversionText'); const value = parseFloat(potenzaInput.value); if (value && value > 0) { if (currentUnit === 'cv') { const kw = Math.round(value * CV_TO_KW); conversionText.textContent = `${value} CV = circa ${kw} kW`; } else { const cv = Math.round(value / CV_TO_KW); conversionText.textContent = `${value} kW = circa ${cv} CV`; } } else { if (currentUnit === 'cv') { conversionText.textContent = 'Inserisci i cavalli della tua auto'; } else { conversionText.textContent = 'Inserisci i kilowatt della tua auto'; } } } // Event Listeners sicuri const potenzaInput = document.getElementById('potenza'); if(potenzaInput) potenzaInput.addEventListener('input', updateConversionHint); const form = document.getElementById('bolloForm'); if(form) { form.addEventListener('submit', function(e) { e.preventDefault(); let potenzaValue = parseFloat(document.getElementById('potenza').value); let potenzaKW; if (currentUnit === 'cv') { potenzaKW = Math.round(potenzaValue * CV_TO_KW); } else { potenzaKW = Math.round(potenzaValue); } const euro = document.getElementById('euro').value; const regione = document.getElementById('regione').value; const annoImmatricolazione = parseInt(document.getElementById('annoImmatricolazione').value); const alimentazione = document.getElementById('alimentazione').value; // Usa la data corrente reale const annoCorrente = new Date().getFullYear(); const anniDallImmatricolazione = annoCorrente - annoImmatricolazione; let isElettricaEsente = false; let isElettricaRidotta = false; if (alimentazione === 'elettrica') { const regioniEsenzionePermanente = ['lombardia', 'piemonte']; if (regioniEsenzionePermanente.includes(regione)) { isElettricaEsente = true; } else if (anniDallImmatricolazione 185 && !isElettricaEsente) { hasSuperbollo = true; superbollo = calcolaSuperbollo(potenzaKW, annoImmatricolazione, annoCorrente); } mostraRisultati(bolloBase, superbollo, hasSuperbollo, { alimentazione: alimentazione, isElettricaEsente: isElettricaEsente, isElettricaRidotta: isElettricaRidotta, anniDallImmatricolazione: anniDallImmatricolazione, regione: regione, annoCorrente: annoCorrente }); }); } function calcolaBolloBase(potenza, euro, regione) { let tariffa; if (euro === '4' || euro === '5' || euro === '6') { tariffa = tariffeRegionali[regione] || tariffeRegionali['default']; } else { tariffa = tariffeEuro[euro]; } let importo = 0; if (potenza = 20) { return 0; } else if (etaVeicolo >= 15) { tariffa = 3; } else if (etaVeicolo >= 10) { tariffa = 6; } else if (etaVeicolo >= 5) { tariffa = 12; } return kwOltreSoglia * tariffa; } function formatEuro(importo) { return '€ ' + importo.toFixed(2) .replace('.', ',') .replace(/B(?=(d{3})+(?!d))/g, '.'); } function mostraRisultati(bolloBase, superbollo, hasSuperbollo, extraInfo = {}) { const { alimentazione, isElettricaEsente, isElettricaRidotta, anniDallImmatricolazione, regione, annoCorrente } = extraInfo; const resultContainer = document.getElementById('resultContainer'); // Rimuovi eventuali box dinamici vecchi const vecchiMessaggi = resultContainer.querySelectorAll('.esenzione-elettrica, .nota-elettrica-ridotta'); vecchiMessaggi.forEach(el => el.remove()); if (isElettricaEsente) { document.getElementById('bolloBase').textContent = formatEuro(0); document.getElementById('superbolloRow').style.display = 'none'; document.getElementById('totalAmount').textContent = formatEuro(0); document.getElementById('superbolloAlert').style.display = 'none'; let esenzioneMsg = document.createElement('div'); esenzioneMsg.className = 'esenzione-elettrica superbollo-alert'; // Inseriscilo prima delle note const note = resultContainer.querySelector('.info-note'); note.parentNode.insertBefore(esenzioneMsg, note); const regioniPermanenti = ['lombardia', 'piemonte']; if (regioniPermanenti.includes(regione)) { esenzioneMsg.innerHTML = ` `; } else { const anniRimasti = 5 - anniDallImmatricolazione; esenzioneMsg.innerHTML = ` `; } } else { document.getElementById('bolloBase').textContent = formatEuro(bolloBase); if (hasSuperbollo) { document.getElementById('superbolloRow').style.display = 'flex'; document.getElementById('superbolloAmount').textContent = formatEuro(superbollo); document.getElementById('superbolloAlert').style.display = 'flex'; } else { document.getElementById('superbolloRow').style.display = 'none'; document.getElementById('superbolloAlert').style.display = 'none'; } const totale = bolloBase + superbollo; document.getElementById('totalAmount').textContent = formatEuro(totale); if (isElettricaRidotta) { let notaElettrica = document.createElement('div'); notaElettrica.className = 'nota-elettrica-ridotta info-alert elettrica'; notaElettrica.style.marginTop = '15px'; document.getElementById('resultContainer').querySelector('.total-result').after(notaElettrica); notaElettrica.innerHTML = ` `; } } resultContainer.classList.add('show'); resultContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } })();