/************************************************************************************************/
/************************************************************************************************/
/****************** VERSIONE 2.0.0 INCLUDO - CSS ***********************************************/



/* blocco-scudo */
#includo-root, 
#includo-root * {
  all: revert-layer;            /* se usi @layer */
  /* all: revert;               /* se NON usi layer (⇧ 2023+), oppure: */
  /* all: unset;                /* compatibilità più ampia – poi re-imposti */
  box-sizing: border-box;
  font: 400 14px/1.4 system-ui, sans-serif;
  /*color: #000;*/                  /* colori “base” del widget */
  margin: 0; padding: 0;        /* azzera spazi del tema host           */
}


/* -----------------------------
       CONTENITORE WIDGET
    ----------------------------- */
#includo-root.includo_widget-container {
      position: fixed;
      right: 2%;
      bottom: 20px;
      width: 95%;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      height: 40vh;
      flex-direction: column;
      visibility: hidden;
      opacity: 0;
      transform: translateX(100%);
      transition: transform .4s ease, opacity .4s ease;
      z-index: 99999 !important;
    }
#includo-root.includo_widget-container.show {
      display: flex;
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
    @media (min-width: 600px) {
#includo-root.includo_widget-container {
        right: 20px;
        bottom: auto;
        top: 30%;
        width: 520px;
        height: 62vh;
      }
    }

    /* -----------------------------
       BOTTONE FLOTTANTE
    ----------------------------- */
button.includo_toggle-button {
      position: fixed !important;
      bottom: 20px;
      right: 20px;
      width: 56px !important;
      height: 56px !important;
      border-radius: 50% !important;
      background: url('logo-pulsante-accessibilita-digitale-delante.png');
      background-size: cover !important;
      color: #fff !important;
      font-size: 28px !important;
      border: none !important;
      cursor: pointer !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
      z-index: 99999 !important;
      transition: all .3s ease !important;
      padding: 0 !important;

    }
    /*
.includo_toggle-button:hover {
      border: 2px solid #1f5fc1;
      box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }
    */
    /* -----------------------------
       HEADER WIDGET
    ----------------------------- */
#includo-root .includo_widget-header {
      background: #2c7be5;
      color: #fff;
      font-size: 1.2rem;
      font-weight: bold;
      padding: 12px 16px;
      border-radius: 12px 12px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

#includo-root .includo_widget-header .includo_logo_side img{
    height: 27px; width: auto; vertical-align: middle;
}

#includo-root .includo_widget-header .includo_title_header {
flex:1;text-align:center;font-size:1.2rem;font-weight:bold}
    /* -----------------------------
       AREA CONTENUTI
    ----------------------------- */
#includo-root .includo_widget-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
#includo-root .includo_widget-grid {
      flex-grow: 1;
      overflow-y: auto;
      padding: 8px;
    }

    /* -----------------------------
       GRUPPI & CARD
    ----------------------------- */
#includo-root .includo_group { margin-bottom: 24px; }
#includo-root .includo_group-title {
      font-weight: bold;
      margin-bottom: 8px;
      font-size: 1rem;
      color: #333;
    }
#includo-root .includo_group-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    #includo-root .includo_group-grid-profilo {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 600px) {
#includo-root .includo_group-grid { grid-template-columns: 1fr 1fr 1fr; }
#includo-root .includo_group-grid-profilo { grid-template-columns: 1fr 1fr; }
#includo-root .includo_card-profilo span.text-profilo {width: 60px !important; }
    }

    /* Card generiche (icone in alto, testo centrato) */
#includo-root .includo_card {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: background .3s ease, color .3s ease;
      text-align: center;
      min-height: 110px;
    }
#includo-root .includo_card:hover { border-color: #2c7be5; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

    /* Card PROFILO – layout orizzontale testo + switch */
#includo-root .includo_card-profilo {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: background .3s ease, color .3s ease;
    }
#includo-root .includo_card-profilo span.text-profilo {width: auto; }
#includo-root .includo_card-profilo:hover { border-color: #2c7be5; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

    /* Stato attivo */
#includo-root .includo_card.active, .includo_card-profilo.active {
      background: #2c7be5;
      color: #fff;
      border-color: #2c7be5;
    }
#includo-root .includo_card.active img, .includo_card-profilo.active img{
      filter: invert(1);
} 

    /* Icone card standard */
#includo-root .includo_card-icon { font-size: 24px; }
#includo-root .includo_card-icon img { width: 40px; height: 40px; }

    /* Switch stile iOS */
#includo-root .includo_switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
    }
#includo-root .includo_switch input { opacity:0; width:0; height:0; }
#includo-root .includo_switch span:first-of-type {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: #ccc;
      transition: .4s;
      border-radius: 34px;
      cursor:pointer;
    }
#includo-root .includo_switch span:last-of-type {
      position: absolute;
      left: 3px;
      bottom: 3px;
      width: 16px;
      height: 16px;
      background: #fff;
      transition: .4s;
      border-radius: 50%;
    }
#includo-root .includo_switch input:checked + span:first-of-type { background: #2c7be5; }
#includo-root .includo_switch input:checked + span:first-of-type + span:last-of-type { transform: translateX(18px); }

    /* Footer & link azioni */
#includo-root .includo_action-links { display:flex; justify-content:space-around; border-top:1px solid #e0e0e0; background:#fafafa; padding:8px 12px; }
#includo-root .includo_footer { text-align:center; font-size:.85rem; color:#888; padding:8px 12px; }

/***************** FUNZIONI***********************/

/* dislessia */
   @font-face {font-family: "dyslexic"; src:local("dyslexic"), url("https://guida.coopdelante.it/accessibilita/OpenDyslexicAlta-Regular.otf") format("opentype");}
    .dyslexia-friendly *:not(#accessibility-sidebar):not(#accessibility-sidebar *) {/* font-family: 'Comic Sans MS', cursive, sans-serif !important; */ font-family: "dyslexic";}
/* carattere leggibile */
.readable-font *:not(#accessibility-sidebar):not(#accessibility-sidebar *) {font-family: Arial, Helvetica, sans-serif !important;}
/* Lente di ingrandimento */
#includo-magnifier {position: absolute; background-color: rgba(0, 0, 0, 0.8);color: white; padding: 10px; font-size: 36px; display: none; z-index: 1001; max-width: 300px; border-radius: 8px;}

/* Stile per evidenziare i link */
.highlight-links a { outline: 3px solid red !important; /* Bordo rosso attorno ai link */ padding: 2px;}

/* Stile per evidenziare i titoli */
.highlight-headings h1, .highlight-headings h2, .highlight-headings h3, .highlight-headings h4, .highlight-headings h5, .highlight-headings h6 { outline: 3px solid blue !important; /* Bordo blu attorno ai titoli */ padding: 2px;}

/* Stile per evidenziare al passaggio del mouse */
.highlight-hover *:hover { outline: 2px solid orange !important; /* Bordo arancione attorno agli elementi al passaggio del mouse */ background-color: rgba(255, 165, 0, 0.2); /* Sfondo arancione chiaro */}


/* contrasto alto */
.high-contrast *:not(#includo-root):not(#includo_widget-container):not(#includo-root *):not(#includo_widget-container *) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

.high-contrast a:not(#includo-root):not(#includo_widget-container):not(#includo-root *):not(#includo_widget-container *) {
  color: #00ffff !important;
  text-decoration: underline !important;
}

/*  fine contrasto alto */

/* Guida alla lettura */
#reading-guide { position: absolute; background-color: #1876AC; /* Riempimento blu chiaro */ border: 2px solid black; /* Bordo nero */ height: 8px; /* Altezza della barra */ width: 600px; /* Larghezza della barra */ display: none; z-index: 1002; pointer-events: none; /* Permette l'interazione con gli elementi sottostanti */ border-radius: 20px;}
#reading-guide:before { content: ''; position: absolute; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid black; /* Triangolo blu chiaro */ left: 50%; transform: translateX(-50%); margin-top: -16px; /* Posizione del triangolo sopra la barra */}

/* MASCHERA DI LETTURA */
#reading-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 10001;}
.mask-top,.mask-bottom { position: absolute; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); /* Oscuramento */ }
.mask-top { top: 0;}
.mask-bottom { bottom: 0; }
.mask-center { position: absolute; left: 0; width: 100%; height: 200px; /* Altezza dell'area di lettura (200px sopra e 200px sotto il cursore) */ background-color: transparent;}
/* FINE MASCHERA DI LETTURA */


/* NAVIGAZIONE TASTIERA */
.keyboard-navigation *:focus {
  outline: 3px solid #2c7be5 !important;
  outline-offset: 3px !important;
}


.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  background: #2c7be5;
  color: #fff;
  padding: 8px 12px;
  font-size: 14px;
  z-index: 10000;
}

.skip-link:focus {
  left: 10px;
}

#navigation-feedback {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #2c7be5;
  color: white;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 99999;
  font-family: sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: none;
}

/* FINE NAVIGAZIONE TASTIERA */


/* DICHIARAZIONE DI ACCESSIBILITA' */

#includo-accessibility-modal {
  position: fixed;
  z-index: 10001;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.includo-modal-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.includo-modal-content {
  position: relative;
  background: #fff;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 8px;
  z-index: 1;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
  font-size: 14px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .includo-modal-content {
    width: 95%;
    padding: 16px;
    font-size: 13px;
  }

  .includo-modal-close {
    top: 8px;
    right: 10px;
    font-size: 14px;
  }
}

.includo-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}


/* FINE DICHIARAZIONE */