/* --- CONFIGURAZIONE STANDARD BOX APRIBILI --- */

/* Il contenitore esterno */
details.box-standard {
  margin: 20px 0px;       /* Spazio sotto */
  background: #fff;          /* Sfondo bianco */
  
  border-radius: 5px;        /* Angoli leggermente stondati */
  overflow: hidden;          /* Tiene tutto ordinato */
}

/* La barra del titolo (sempre visibile) */
summary.box-header {
  display: flex;
  justify-content: space-between; /* Titolo a sx, Icona a dx */
  align-items: center;
  padding: 10px 15px;             /* Spaziatura interna */
  background-color: #eee;         /* Grigio scuro per stacco visivo */
  cursor: pointer;
  font-family: sans-serif;
  list-style: none;               /* Rimuove marker default */
  user-select: none;              /* Evita che il testo si selezioni cliccando */
}

/* Rimuove il triangolino su Chrome/Safari */
summary.box-header::-webkit-details-marker {
  display: none;
}

/* Effetto Hover */
summary.box-header:hover {
  background-color: #e0e0e0;
}

/* L'icona (+ o freccia) */
.box-icon {
  font-weight: bold;
  font-size: 1.2rem;
  transition: transform 0.2s; /* Rotazione fluida */
}

/* --- ANIMAZIONE APERTURA --- */
details.box-standard[open] .box-icon {
  transform: rotate(45deg); /* Ruota il + */
}

/* --- IL TUO CONTENUTO INTERNO --- */
/* Questo serve a dare aria al tuo DIV interno senza toccarlo */
details.box-standard > div,
details.box-standard > section {
  padding: 1px;             /* Padding universale per il contenuto */
  border-top: 1px solid #ccc; /* Linea che separa titolo da contenuto */
}