body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f7f6;
            color: #333;
            margin: 0;
            
		
        }
		 html {
           /* scroll-behavior: smooth;*/
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        /* Il contenitore principale per la griglia */
        .elenco-grid {
            display: grid;
            /* Definisce due colonne: la prima occupa 1 frazione di spazio, la seconda 3. */
            /* Puoi cambiare questi valori per modificare la larghezza relativa delle colonne (es. 1fr 4fr) */
            grid-template-columns: 1fr 5fr;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden; /* Nasconde gli angoli del bordo che sporgono */
        }

        /* Stile per tutte le celle della griglia */
        .elenco-grid > div {
            padding: 12px 15px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        /* Rimuove il bordo inferiore dell'ultima riga per un look più pulito */
        .elenco-grid > div:nth-last-child(-n+2) {
            border-bottom: none;
        }

        /* Stile per le intestazioni delle colonne */
        .grid-header {
            font-weight: bold;
            background-color: #f5f5f5;
            color: #3399cc;;
        }


        /* Stile per le righe alternate (effetto "zebra") per migliorare la leggibilità */
        /* Seleziona le celle della seconda, quarta, sesta riga... */
        .elenco-grid > div:nth-child(4n+1),
        .elenco-grid > div:nth-child(4n+2) {
             background-color: #fafafa;
        }

        /* Stile specifico per la colonna dei codici */
        .codice {
            font-weight: 600;
            font-family: 'Courier New', Courier, monospace;
            color: #555;/*#0056b3;*/
        }
		 .codice-neretto {
            
			font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            color: #555;/*#0056b3;*/
        }

        /* NUOVO STILE: per i codici con asterisco */
        .codice-pericoloso {
            color: #f70505;/*#d9534f; /* Un colore rosso per l'attenzione */
            font-weight: 700; /* Leggermente più grassetto */
        }

        /* Stile per la colonna delle descrizioni */
        .descrizione {
            color: #555;
        }
		
		 .neretto {
            font-weight: bold;
        }

        /* Responsive: su schermi piccoli le colonne diventano una sopra l'altra */
        @media (max-width: 600px) {
            .elenco-grid {
                grid-template-columns: 1fr; /* Una sola colonna */
            }
            
            .codice {
                border-bottom: 1px dashed #ccc; /* Aggiunge un separatore tra codice e descrizione */
            }
             .elenco-grid > div {
                 border-bottom: none; /* Rimuove il bordo principale */
             }
             .elenco-grid > div:nth-child(even) {
                 padding-top: 0;
                 border-bottom: 2px solid #e0e0e0; /* Aggiunge un bordo più marcato tra le coppie */
             }
        }
   .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        h1, h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        /* --- NUOVO: Stile per l'indice --- */
        #indice-container {
            margin-bottom: 40px;
            padding: 20px;
            background-color: #fafafa;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
        }

        #indice-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 25px; /* Spazio verticale e orizzontale tra i link */
            justify-content: center;
			font-weight: 600;
        }
		
		   .indice-link p{
            font-family: 'Courier New', Courier, monospace;
            font-weight: 600;
            text-align: center;
			
        }
        .indice-link {
            text-decoration: none;
            font-family: 'Courier New', Courier, monospace;
            font-weight: 600;
            color: #0056b3;
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color 0.2s;
			font-size: 1.1em;
        }

        .indice-link:hover {
            background-color: #e9ecef;
        }
        /* --- Fine stile indice --- */
		

.imasx img{
 width: 200px; 
 float:left;
 margin: 10px;
 padding-right:20px;
}

/* Contenitore generale del menu */
.menu-discesa {
    width: 100%;
    font-weight: bold;
    font-size: 1.1rem;
    position: sticky;
    top: 0;
    z-index: 101;
}

/* Voci del menu principale in riga */
.menu-discesa > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: var(--blu);
    box-shadow: 0 8px 8px rgba(0,0,0,0.1);
	
}

/* Stile di base per le voci di lista (Livello 1) */
.menu-discesa li {
    position: relative; /* ESSENZIALE per posizionare il Livello 2 */
}

/* Stile di base per i link principali (Livello 1) */
.menu-discesa > ul > li > a {
    display: block;
    padding: 15px 35px;
    text-decoration: none;
    color: white;
    background-color: var(--blu);
    transition: background-color 0.3s ease;
    white-space: nowrap;
	
}
 
/* Effetto hover per le VOCI PRINCIPALI (Livello 1) */
.menu-discesa > ul > li > a:hover {
    background-color: var(--verde);
}

/* ========================================================= */
/* === GESTIONE SOTTOMENU (Livello 2 e Livello 3) === */
/* ========================================================= */

/* 1. Stili comuni e Nascondi di Default */
/* Selettore unificato per Livello 2 (.sottomenu) e Livello 3 (.sottomenu-livello-3) */
.menu-discesa .sottomenu,
.menu-discesa .sottomenu-livello-3 {
    display: none; /* NASCONDI DI DEFAULT */
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 400px;
	background-color: *var(--sfondo-chiaro)
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 102; 
    color:var(-- testo-scuro);
	border-top: 1px solid #eee;
	font-size: 1rem;
	
}

/* 2. Regole di Visualizzazione (Hover) */

/* MOSTRA il Livello 2 (verticale) */
/* Quando fai hover su un LI del Livello 1, mostra il suo UL figlio (.sottomenu) */
.menu-discesa > ul > li:hover > .sottomenu {
    display: block;
    top: 100%; /* Posiziona Livello 2 sotto Livello 1 */
    left: 0;
}


/* 3. Posizionamento e Visualizzazione del Livello 3 (Orizzontale) */

/* Assicurati che il LI del Livello 2 sia position: relative; (già fatto nel selettore .menu-discesa li) */

/* Regole specifiche di POSIZIONAMENTO per il Livello 3 */
.menu-discesa .sottomenu-livello-3 {
    top: 0;      /* Allinea l'alto del Livello 3 con l'alto del suo LI genitore (Livello 2) */
    left: 100%;  /* Sposta il Livello 3 a destra del suo LI genitore */
}

/* MOSTRA il Livello 3 (orizzontale) */
/* Quando fai hover su un LI del Livello 2, mostra il suo UL figlio (.sottomenu-livello-3) */
.menu-discesa .sottomenu > li:hover > .sottomenu-livello-3 {
    display: block;
}

/* 4. Stili Link (Comuni a Livello 2 e 3) */
.menu-discesa .sottomenu li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--testo-scuro);
    background-color: var(--sfondo-chiaro);
    transition: background-color 0.3s ease;
	border-bottom: 1px solid var(--blu);
}

/* Effetto hover per le voci di Livello 2 e 3 */
.menu-discesa .sottomenu li a:hover {
    background-color: var(--verde);
	color: var(--testo-chiaro);
}    

.menu-discesa .sottomenu-livello-3 li a{
    background-color: var(--sfondo-scuro);
}