:root {

            --family-1-color: #9491aa;  /* violetto - colore primario UI */

            --family-2-color: #8eb25b;  /* verde - colore conferma */

            --family-3-color: #cf6424;  /* arancione - colore warning */

            --family-4-color: #d13046;  /* rosso - colore alert */

        }

        
/*
        body {

            font-family: 'Open Sans', Arial, sans-serif;

            background-color: #f7f6f1;

            margin: 0;

            padding: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;
            
            margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

        }

  */      

        .container {

            width: 900px;

            background-color: #fff;

            border-radius: 18px;

            box-shadow: 0 6px 26px rgba(0, 0, 0, 0.1);

            padding: 30px;

            position: relative;

        }

        

        .title {

            font-family: 'Dosis', sans-serif;

            font-size: 1.5rem;

            font-weight: 600;

            text-transform: uppercase;

            color: #9491aa;

            border-bottom: 1px solid rgba(102, 102, 102, 0.2);

            padding-bottom: 15px;

            margin-bottom: 30px;

        }

        

        .profile-visualization {

            position: relative;

            width: 500px;

            height: 500px;

            margin: 0 auto;

        }

        

        .silhouette {

            position: absolute;

            width: 280px;

            height: 460px;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M50,10 C60,10 65,15 65,25 C65,35 60,45 50,45 C40,45 35,35 35,25 C35,15 40,10 50,10 Z M30,45 C30,45 25,60 25,75 C25,90 30,100 35,110 C40,120 40,130 40,140 C40,150 35,160 35,170 C35,180 40,190 50,190 C60,190 65,180 65,170 C65,160 60,150 60,140 C60,130 60,120 65,110 C70,100 75,90 75,75 C75,60 70,45 70,45 C70,45 65,50 50,50 C35,50 30,45 30,45 Z" fill="%23D2D1CD"/></svg>');

            background-repeat: no-repeat;

            background-position: center;

            background-size: contain;

            z-index: 1;

        }

        

        .segment-label {

            position: absolute;

            font-size: 12px;

            color: #333;

            font-weight: bold;

            text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;

            z-index: 3;

        }

        

        .legend {

            display: flex;

            flex-wrap: wrap;

            margin-top: 30px;

            justify-content: space-between;

        }

        

        .legend-family {

            width: 24%;

            margin-bottom: 20px;

        }

        

        .legend-title {

            font-family: 'Dosis', sans-serif;

            font-size: 1rem;

            font-weight: 600;

            text-transform: uppercase;

            color: #666;

            margin-bottom: 10px;

            padding-bottom: 5px;

            border-bottom: 1px solid rgba(102, 102, 102, 0.2);

        }

        

        .legend-item {

            display: flex;

            align-items: center;

            margin-bottom: 5px;

        }

        

        .legend-color {

            width: 12px;

            height: 12px;

            border-radius: 50%;

            margin-right: 8px;

        }

        

        .legend-label {

            font-size: 0.9rem;

            color: #666;

        }

        

        .legend-value {

            margin-left: auto;

            font-weight: 600;

            color: #333;

        }

        

        /* Family specific colors */

        .family-1 {

            background-color: var(--family-1-color);

        }

        

        .family-2 {

            background-color: var(--family-2-color);

        }

        

        .family-3 {

            background-color: var(--family-3-color);

        }

        

        .family-4 {

            background-color: var(--family-4-color);

        }