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 16px 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 */
}

.menu-discesa  p {
  color: #ffffff;
  padding: 15px 35px;
  margin:0;
}
.menu-discesa p:hover {
	display: block;
	padding: 15px 35px;
	margin: 0;
	cursor: pointer;
	background-color: var(--verde);
	white-space: nowrap;
}
/* 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;
	font-weight: bold;
	
}
 
/* 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: #cfd1d0;
}

/*BARRA DI RICERCA*/
 /* Etichetta chiara e visibile sopra la barra */
        .search-label {
            font-size: 1.5rem; /* 24px */
            font-weight: 700;
            color: #2c3e50; /* Un colore scuro, non nero puro */
            text-align: center; /* Centra il titolo */
            display: block; /* Lo mette sulla sua riga */
            margin-bottom: 12px; /* Spazio prima della barra */
        }

        /* Il contenitore principale della barra di ricerca */
        .search-box-container {
			position:relative;
            display: flex; /* Allinea icona e input in orizzontale */
            align-items: center; /* Centra verticalmente */
            
            background-color: #ffffff;
            border: 2px solid #dfe6e9; /* Bordo grigio chiaro */
            
            /* Angoli molto arrotondati per un look "pillola" moderno */
            border-radius: 50px; 
            
            padding: 12px 20px; /* Spaziatura interna (più alta e stretta) */
            
            /* Ombra bella e sottile per farla "fluttuare" */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
            
            /* Transizione per l'effetto focus (quando ci clicchi) */
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            
            /* Centra la barra e le dà una larghezza massima */
            max-width: 800px; 
            margin: 20px auto 40px auto; /* 20px sopra, 40px sotto, auto per centrare */
        }

        /* Stile per l'icona SVG (lente d'ingrandimento) */
        .search-icon {
            width: 20px;  /* Dimensione icona */
            height: 20px;
            fill: #8395a7; /* Colore grigio per l'icona */
            margin-right: 8px; /* Spazio tra icona e testo */
            flex-shrink: 0; /* Impedisce all'icona di rimpicciolirsi */
            transition: fill 0.2s ease; /* Transizione per il colore */
        }
		

        /* Stile per l'input VERO E PROPRIO (dove l'utente scrive) */
        #search-bar {
            border: none;  /* Rimuove il bordo standard */
            outline: none; /* Rimuove l'orribile bordo blu al click */
            width: 100%; /* Occupa tutto lo spazio rimanente */
            font-size: 1.1rem; /* 18px, ben leggibile */
            font-weight: 500;
            color: #2c3e50;
            background-color: transparent; /* Sfondo trasparente */
			
			padding: 10px;
			padding-right: 80px; /* Spazio per non coprire i bottoni a destra */
			box-sizing: border-box;
        }

        /* Stile per il placeholder (il testo grigio di suggerimento) */
        #search-bar::placeholder {
            color: #a0a0a0;
            font-weight: 400;
        }
		
		/* Stile per il bottone di reset (la freccina) */
		#btn-reset-ricerca {
		display: none; /* Nasce nascosto */
		position: absolute;
		right: 50px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		background: transparent;
		border: none;
		color: red;
		font-size: 1.8rem;
		line-height: 1;
		font-weight: bold;
		padding: 0 5px;
		}

        /* * EFFETTO CHIAVE: 
         * Quando l'utente CLICCA sulla barra (o sull'input)
         */
        .search-box-container:focus-within {
            /* Scegli un colore principale (es. blu) */
            border-color: #007bff; 
            box-shadow: 0 5px 20px rgba(0, 123, 255, 0.15); /* Ombra colorata */
        }
        
        /* L'icona cambia colore quando la barra è attiva */
        .search-box-container:focus-within .search-icon {
            fill: #007bff;
        }

        /* --- STILI AGGIUNTI PER I RISULTATI DI RICERCA --- */

        /* Aggiungi questa classe al tuo CSS per .elenco-grid 
           per assicurarti che i risultati appaiano correttamente */
        /* Esempio:
        .elenco-grid {
            display: grid;
            grid-template-columns: 100px 1fr;
            gap: 5px;
        }
        */

        /* * STILE REALE PER .elenco-grid - Assicurati che questo stile esista!
         * Se hai già questo stile nel tuo CSS, puoi ignorarlo.
         * Adatta le colonne al tuo layout. Es: 120px per il codice, 1fr per il resto
        */



        /* Contenitore per i risultati (nascosto di default) */
        #risultati-ricerca {
            display: none; /* Inizia nascosto */
            /* Rimuoviamo i margini duplicati da .elenco-grid */
            margin-top: -20px; 
            margin-bottom: 40px;
            padding-top: 20px;
			box-shadow:  1px 1px 10px rgba(255,0,0,5.2); /*colora di rosso il bordo*/
			transition: opacity 0.3s, transform 0.3s;
        }

        /* Messaggio per quando non ci sono risultati */
        .nessun-risultato {
            text-align: left;
            font-size: 1.1rem;
            color: red; /*#8395a7;*/
            padding: 20px;
            font-weight: 500;
            /* Occupa entrambe le colonne della griglia */
            grid-column: 2 / -1;
        }
		
		/*BOTTONE*/
		#scrollToTopBtn {
  display: none; /* Nascosto di default */
  position: fixed; /* Rimane fisso durante lo scroll */
  bottom: 15px; /* 25px dal basso */
  right: 75px; /* 25px da destra */
  z-index: 99; /* Sta sopra gli altri elementi */
  border: none;
  outline: none;
  /* Usa un colore coordinato con la tua barra di ricerca */
  background-color: #3399cc; /*#007bff; blu */
  color: white;
  cursor: pointer;
  padding: 12px;
  border-radius: 50%; /* Rotondo */
  width: 48px;  /* Larghezza fissa */
  height: 48px; /* Altezza fissa */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: opacity 0.3s, transform 0.3s;
}

#scrollToTopBtn:hover {
  background-color: #007bff; /* Colore più scuro all'hover */
  transform: scale(1.05); /* Leggero ingrandimento */
}

/* Adatta l'SVG all'interno del pulsante */
#scrollToTopBtn svg {
    width: 24px;
    height: 24px;
}

.content-section {
    padding: 50px 20px;
    max-width: 1200px;
    margin: 40px auto;
    background-color: #fff;
    border-radius: 30px;
	border: 1px solid rgba(51, 153, 204, 0.5);
    box-shadow: 0px 2px 25px rgba(51,153,204,0.5);
}
.feedback-box {
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    margin-top: 30px;
    max-width: 400px; /* Larghezza massima */
    margin-left: auto; /* Per centrarlo */
    margin-right: auto;
}

.feedback-box p {
    margin: 0 0 15px 0;
    font-weight: bold;
    color: #333;
}

.btn-feed {
    background-color: white;
    border: 1px solid #ccc;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.btn-feed:hover {
    background-color: #e6f7ff;
    border-color: #007bff;
}
/* Stile specifico per il pollice VERDE (Sì) */
.btn-si {
    color: #28a745;       /* Verde piacevole */
    border-color: #28a745;
}

.btn-si:hover {
    background-color: #28a745; /* Diventa tutto verde al passaggio del mouse */
    color: white;              /* Testo bianco */
}

/* Stile specifico per il pollice ROSSO (No) */
.btn-no {
    color: #dc3545;       /* Rosso piacevole */
    border-color: #dc3545;
}

.btn-no:hover {
    background-color: #dc3545; /* Diventa tutto rosso al passaggio del mouse */
    color: white;              /* Testo bianco */
}
#feedback-grazie {
    display: none;
}