<style>
/* wrapper: largo come il contenuto sotto (full) + meno aria */
.sun-prereg-wrap{
  width:100%;
  max-width:100% !important;
  margin:10px 0;
  padding:12px 14px;
  border:1px solid #e6e6e6;
  border-radius:16px;
  background:#fff;
  box-sizing:border-box;
}

/* box upload: più basso e meno padding */
.sun-drop{
  border:2px solid #7fb7d6;
  background:#e9f6ff;
  border-radius:18px;
  padding:16px 14px;
  text-align:center;
  cursor:pointer;
  user-select:none;
}

/* testo: più stretto e compatto */
.sun-prereg-note{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.2;
  color:#6b7280;
}
.sun-drop a{ color:#2b6cb0; text-decoration:underline; }

/* nome file + bottone: meno margini */
.sun-file{ margin-top:8px; font-size:13px; color:#374151; text-align:center; }
.sun-actions{ display:flex; justify-content:center; margin-top:10px; }
.sun-btn{ padding:10px 22px; border-radius:10px; border:1px solid #cfd7df; background:#fff; cursor:pointer; font-size:15px; }
.sun-btn.primary{ background:#0b7bbf; color:#fff; border-color:#0b7bbf; }

/* error compattato */
.sun-err{ margin:10px 0 0; padding:10px 12px; border:1px solid #f3b3b3; background:#fff0f0; border-radius:12px; color:#7f1d1d; font-weight:600; }

  #sun_file_name.sun-file-inline{
    display:inline-block;
    margin-left:10px;
    font-weight:600;
  }
<

</style>
<style>
  #sun_drop{
    border:2px dashed #7fb3d5;
    background:#eef7ff;
    border-radius:18px;
    padding:18px 18px;
    text-align:center;
  }

  #sun_drop .sun-prereg-note{
    font-size:16px;
    line-height:1.35;
    color:#2a2a2a;
    margin-bottom:10px;
  }

  #sun_drop .sun-prereg-sub{
    font-size:14px;
    color:#4a4a4a;
  }

  #sun_drop .sun-prereg-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:10px;
  }

  #sun_drop .sun-prereg-label{
    font-weight:700;
    color:#1f3b57;
  }

#sun_pick.sun-pick-btn{
    display:inline-block;
    padding:8px 12px;   /* prima 10px 14px */
    border-radius:999px;
    background:#0b63b8;
    color:#fff !important;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.2px;
    font-size:15px;     /* leggermente più piccolo */
    box-shadow:0 6px 14px rgba(11,99,184,.18);
    transition:transform .05s ease, opacity .15s ease;
}

  #sun_pick.sun-pick-btn:hover{ opacity:.92; }
  #sun_pick.sun-pick-btn:active{ transform:translateY(1px); }

  #sun_file_name.sun-file-pill{
    display:inline-block;
    padding:8px 12px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid #cfe3f2;
    color:#1b2a3a;
    font-weight:700;
    max-width:520px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* mobile: torna tutto in colonna ordinata */
  @media (max-width: 640px){
    #sun_drop{ padding:16px 12px; }
    #sun_drop .sun-prereg-note{ font-size:15px; }
    #sun_drop .sun-prereg-row{ gap:8px; }
    #sun_file_name.sun-file-pill{ max-width:100%; }
  }
</style>



<div class="sun-prereg-wrap">
  <form method="post" enctype="multipart/form-data" id="sun_prereg_form">
    <input type="hidden" name="prereg_step" value="1">
    <input type="file" name="prereg_pdf" id="sun_prereg_pdf" accept="application/pdf" hidden required>

<div class="sun-drop" id="sun_drop">
  <div class="sun-prereg-note">
    <b>Carica la tua bolletta elettrica per avviare la precompilazione automatica.</b><br>
  </div>

  <div class="sun-prereg-row">
  <span class="sun-prereg-label">
  Seleziona il file della bolletta in formato <b>PDF</b>:
</span>


    <a href="#" id="sun_pick" class="sun-pick-btn">📄 Clicca per selezionarla</a>

<span class="sun-file-pill" id="sun_file_name">
  Nessun file selezionato</span>





  </div>
</div>




   

  </form>

  
  </div>

<script>
(function () {
  const form   = document.getElementById('sun_prereg_form');
  const fileIn = document.getElementById('sun_prereg_pdf');
  const pick   = document.getElementById('sun_pick');
  const fileNm = document.getElementById('sun_file_name');

  if (!form || !fileIn || !pick) return;
  if (pick.dataset.bound === '1') return;
  pick.dataset.bound = '1';

  pick.addEventListener('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    fileIn.click();
  });

  fileIn.addEventListener('change', function () {
    const f = this.files && this.files[0];
    if (!f) return;

    // mostra subito feedback visivo (prima del reload)
    if (fileNm) fileNm.textContent = 'Controlla i dati… (' + f.name + ')';

    // controlla PDF
    const isPdfByType = (f.type === 'application/pdf');
    const isPdfByName = /\.pdf$/i.test(f.name);
    if (!isPdfByType && !isPdfByName) {
      alert('Formato non valido: caricare esclusivamente un file PDF.');
      this.value = '';
      if (fileNm) fileNm.textContent = 'Nessun file selezionato';
      return;
    }

    // evita doppi invii
    pick.style.pointerEvents = 'none';
    pick.style.opacity = '0.7';

    // piccolo delay per far vedere il testo prima del submit
    setTimeout(function () {
      form.submit();
    }, 200);
  });
})();
</script>






<pre style='background:#111;color:#ff6;padding:12px;border-radius:10px'>OFFERTA NON TROVATA
offerta (GET) = 035699ESVFL01XXENERCASAVARV2024D
offerta (DB ) = 035699ESVFL01XXENERCASAVARV2024D
</pre>