/* Gestione visibilità dinamica */
.hidden { display: none !important; }
/* Ottimizzazione stili per indice dinamico */
.corso-titolo {
    font-weight: bold;
    border-bottom: 1px solid #222;
    background: #f0f0f0;
    color: #000;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 8px 12px;
}
.modulo-titolo {
    color: #FFFDD0;
    font-size: 16px;
    border-bottom: 1px solid #222;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 6px 10px;
}
.argomento-link {
    color: #333;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}
.argomento-link:hover {
    background: #e7f3fe;
    color: #005a9e;
}

        :root {
            --primary-color: #0078d4;
            --primary-hover: #005a9e;
            --background-color: #f8f9fa;
            --container-bg: #ffffff;
            --text-color: #212529;
            --border-color: #dee2e6;
            --selected-bg: #e7f3fe;
            --selected-text: #005a9e;
            --footer-text: #6c757d;
            --cookie-bg: #f0f0f0; /* Nuovo colore per il disclaimer */
            --cookie-border: #ccc;
        }

        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            background-color: var(--background-color);
            color: var(--text-color);
        }

        h1, h2, h3, .sidebar > div {
            font-family: 'Montserrat', 'Nunito', 'Inter', sans-serif;
            font-weight: 600;
        }

        /* --- Contenitore principale (sidebar + footer) con padding per il disclaimer --- */
        .page-wrapper {
            padding-top: 0; /* Inizialmente 0, gestito da JS se il disclaimer è attivo */
            transition: padding-top 0.3s ease-in-out;
            min-height: 100vh; /* Assicura che occupi almeno l'altezza della viewport */
            display: flex;
            flex-direction: column;
        }

        .content-area {
            display: flex; /* Permette alla sidebar di affiancare il resto, se necessario */
            flex-grow: 1; /* Fa espandere l'area per riempire lo spazio disponibile */
        }

        .sidebar {
            width: 380px;
            margin: 40px 0 40px 40px;
            background-color: var(--container-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            flex-shrink: 0; /* Impedisce alla sidebar di restringersi */
            min-height: calc(100vh - 80px); /* Regolato per l'altezza della viewport */
        }

        .controls {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .index-container {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px 0 20px 0;
        }

        .controls label {
            display: block; margin-bottom: 8px; font-weight: 600; color: var(--primary-color);
        }
        #codiceCorsoSelettore, button {
            width: 100%; padding: 10px 12px; margin-bottom: 10px; border-radius: 5px;
            border: 1px solid #ccc; font-size: 15px; box-sizing: border-box;
        }
        button {
            background-color: var(--primary-color); color: white; border: none; cursor: pointer;
            font-weight: 500; transition: background-color 0.2s ease;
        }
        button:hover { background-color: var(--primary-hover); }

        #indice { padding: 0 20px; }

        #indice > div {
            background-color: var(--primary-color) !important;
            color: white !important;
            font-size: 18px !important;
            font-weight: 600 !important;
            padding: 12px 15px;
            border-radius: 6px;
            margin-bottom: 10px;
            cursor: pointer;
            border-bottom: none !important;
        }

        #indice ul {
            list-style-type: none;
            padding-left: 20px;
            margin-top: 10px;
            border-left: 2px solid #e9ecef;
            background-color: var(--container-bg) !important;
            color: var(--text-color) !important;
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            margin-bottom: 15px;
        }
        #indice li {
            margin-bottom: 2px;
        }
        
        #indice a {
            display: block;
            padding: 8px 15px;
            text-decoration: none !important;
            color: #495057 !important;
            font-size: 14px !important;
            border-radius: 5px;
            transition: background-color 0.2s ease, color 0.2s ease;
            white-space: normal;
        }
        #indice a:hover {
            background-color: #f1f3f5;
        }
        
        #indice a.selected {
            background-color: var(--selected-bg) !important;
            color: var(--selected-text) !important;
            font-weight: 600;
        }

        footer {
            text-align: center;
            padding: 25px;
            /* margin-top: auto; */ /* Non più necessario qui direttamente */
            background-color: var(--container-bg);
            border-top: 1px solid var(--border-color);
            font-size: 14px;
            color: var(--footer-text);
            flex-shrink: 0; /* Impedisce al footer di restringersi */
        }
        footer p {
            margin: 4px 0;
        }
        footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }
        footer a:hover {
            text-decoration: underline;
        }

        /* --- Stili per Cookie Disclaimer (POSIZIONE ALTA) --- */
        #cookie-disclaimer {
            position: fixed; /* Fisso in alto */
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--cookie-bg); /* Grigo chiaro */
            color: var(--text-color); /* Testo scuro */
            padding: 15px 20px; /* Padding ridotto */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Ombra più leggera */
            border-bottom: 1px solid var(--cookie-border); /* Bordo inferiore */
            z-index: 1000;
            text-align: center;
            font-size: 13px; /* Font più piccolo */
            display: none; /* Nascosto di default, gestito da JS */
        }
        #cookie-disclaimer p {
            margin: 0 0 10px 0; /* Spazio sotto il testo */
        }
        #cookie-disclaimer a {
            color: var(--primary-color);
        }
        #cookie-disclaimer label {
            display: inline-flex; /* Allinea checkbox e testo */
            align-items: center;
            margin-top: 0;
            cursor: pointer;
            font-weight: 500;
        }
        #cookie-disclaimer input[type="checkbox"] {
            margin-right: 8px; /* Spazio tra checkbox e testo */
            accent-color: var(--primary-color); /* Colore della spunta */
        }
        /* Classe per bloccare l'interazione sul contenuto principale */
        .content-blocked {
            pointer-events: none; /* Disabilita click e interazioni */
            opacity: 0.5; /* Rende il contenuto semi-trasparente */
            filter: blur(2px); /* Effetto sfocato */
            user-select: none; /* Impedisce la selezione del testo */
        }

        /* Stile discreto per il link al video "come usare docs" */
        .video-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px;
            font-size: 14px;
            color: var(--text-color);
            text-decoration: none;
            background: transparent;
            border-radius: 6px;
            padding: 6px 8px;
            border: 1px solid transparent;
            transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .video-link .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            font-size: 12px;
            line-height: 1;
        }
        .video-link small {
            color: #6c757d;
            font-weight: 500;
            text-transform: none;
        }
        .video-link:hover {
            background-color: rgba(0, 120, 212, 0.06);
            border-color: rgba(0,0,0,0.04);
            color: var(--primary-color);
        }
        /* Stile per link di donazione (piccola tazzina/cuore) */
        .donation-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px;
            margin-left: 8px;
            font-size: 14px;
            color: var(--text-color);
            text-decoration: none;
            background: transparent;
            border-radius: 6px;
            padding: 6px 8px;
            border: 1px solid transparent;
            transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .donation-link .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #e76f51; /* calda per distinzione */
            color: white;
            font-size: 12px;
            line-height: 1;
        }
        .donation-link small {
            color: #6c757d;
            font-weight: 500;
        }
        .donation-link:hover {
            background-color: rgba(231,111,81,0.06);
            border-color: rgba(0,0,0,0.04);
            color: #e76f51;
        }
        /* Footer variant small */
        .donation-footer {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: 12px;
            font-size: 13px;
            color: var(--primary-color);
            text-decoration: none;
        }
        .donation-footer .icon { background: #e76f51; }