/* ==========================================================================
   1. RESET GLOBALE E CONTENITORE PRINCIPALE (A TUTTO SCHERMO)
   ========================================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Blocca lo scroll per un effetto App nativa */
  font-family: sans-serif;
}

.container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;       /* Allinea dall'alto in modo ordinato */
  align-items: center;
  height: 100vh;
  width: 100vw;
  padding: 15px;
  box-sizing: border-box;
  background-color: #242433;         /* Colore di sfondo della tua app */
}

/* ==========================================================================
   2. TITOLI E POSIZIONAMENTO VERTICALE
   ========================================================================== */
.container h1 {
   transform: translateY(35px);
   color: #83abd8;  
}

.container h2 {
    
  color:#83abd8;  
}

/* Il blocco centrale che racchiude i 5 pulsanti e la DATA */
#pulsanti {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 10px; 
  margin-top: 60px;                        /* Spazio uniforme tra gli elementi interni */
  margin-bottom: auto;               /* Spinge il blocco APK e le note verso il fondo dello schermo */
}

/* Uniforma la larghezza di tutti gli input e i bottoni */
.container input, 
.container button {
  width: 90%;                    /* Larghezza ideale per i pollici su mobile */
  max-width: 360px;              /* Impedisce che diventino troppo larghi su tablet/PC */
  padding: 14px;                  /* Dimensione comoda da cliccare su touchscreen */
  font-size: 22px;                   /* Evita lo zoom automatico fastidioso su iOS */
  border-radius: 8px;
 
  box-sizing: border-box;
   background-color:#35393d; ; 
   color: #83abd8;
}


#data   { 
   margin-top: 40px;
   }

/* Il tuo stile quando il listener aggiunge la classe .bottone-notifica-attiva */
.bottone-notifica-attiva {
  background-color: #d9383a !important; /* Rosso deciso */
  color: #ffffff !important;
  font-weight: bold !important;
  border: 2px solid #a61c1e !important;
  animation: pulsazioneNotifica 1.2s infinite alternate !important; /* Forza l'effetto battito */
}

/* Animazione fluida di lampeggiamento */
@keyframes pulsazioneNotifica {
  from {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 5px rgba(217, 56, 58, 0.6);
  }
  to {
    opacity: 0.85;
    transform: scale(1.02); 
    box-shadow: 0 0 15px rgba(217, 56, 58, 0.9);
  }
}