/* ============ «Strumenti AI» e «Spiegami gli elementi» ============
   (Francesco, 29-09-2026 e 06-10-2026; js/spiegami.js)

   Il tasto «Strumenti AI» in testata apre un sottomenu di due voci. Il tasto
   resta e non va a capo nell'intestazione stretta (30-09-2026): sopra il
   telefono gli elementi dell'intestazione non si stringono.

   Con «Spiegami gli elementi» acceso: in alto una striscia fissa che lo dice,
   col tasto «Esci da Spiegami»; il cursore è un punto interrogativo;
   l'elemento sotto il mouse si contorna; il pop-up con la scheda accanto. */

/* ---------- il tasto e il sottomenu ---------- */
#ai-strumenti{position:relative;pointer-events:auto;flex-shrink:0}
#ai-strumenti .hdr-ai{white-space:nowrap}
#ai-strumenti .hdr-ai[aria-expanded="true"]{filter:brightness(1.08)}
.ai-strumenti-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:70;min-width:230px;
  background:rgba(20,32,15,.96);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;
  backdrop-filter:blur(16px);box-shadow:0 24px 54px -18px rgba(0,0,0,.8);
}
.ai-strumenti-menu[hidden],.ai-strumenti-menu .menu-voce[hidden]{display:none}
.ai-strumenti-menu .menu-voce{
  width:100%;display:flex;align-items:center;gap:9px;padding:10px 12px;border:none;border-radius:9px;
  background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:#E2ECDC;
  text-align:left;white-space:nowrap;cursor:pointer;transition:background .15s;
}
.ai-strumenti-menu .menu-voce:hover,.ai-strumenti-menu .menu-voce:focus-visible{background:rgba(140,224,122,.14);outline:none}
.light .ai-strumenti-menu{background:rgba(255,255,255,.97);border-color:#E4EADF;box-shadow:0 24px 54px -18px rgba(28,42,24,.35)}
.light .ai-strumenti-menu .menu-voce{color:#1C2A18}
.light .ai-strumenti-menu .menu-voce:hover,.light .ai-strumenti-menu .menu-voce:focus-visible{background:#F1F4EE}
/* il «?» del cliente (06-10-2026, «5 A»): nel portale in testata; nelle
   pagine d'accesso, che non hanno testata, fisso in basso a destra (in alto
   copriva «Registrati» sul telefono), col menu che si apre verso l'alto */
.hdr-aiuto{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(140,224,122,.55);background:#4A9A3F;color:#fff;font:800 18px/1 inherit;cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(92,178,81,.7)}
.hdr-aiuto:hover,.hdr-aiuto[aria-expanded="true"]{filter:brightness(1.08)}
.aiuto-strumenti{position:relative;pointer-events:auto;flex-shrink:0}
#ai-strumenti.aiuto-fuori{position:fixed;bottom:16px;right:16px;z-index:60}
#ai-strumenti.aiuto-fuori .ai-strumenti-menu{top:auto;bottom:calc(100% + 10px)}

/* ---------- la modalità accesa ---------- */
html.spiegami-acceso body{padding-top:46px}
html.spiegami-acceso #crm-root{height:calc(100vh - 46px)}
/* il punto interrogativo dappertutto, tranne sui due tasti che funzionano */
html.spiegami-acceso body *,html.spiegami-acceso body{cursor:help !important}
html.spiegami-acceso #spiegami-striscia button,html.spiegami-acceso #spiegami-pop button{cursor:pointer !important}

#spiegami-striscia{
  position:fixed;top:0;left:0;right:0;z-index:2147483000;height:46px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px;
  background:#F5C542;color:#1C2A18;font:600 14px/1.25 'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
#spiegami-striscia .sp-testo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#spiegami-striscia .sp-esci{
  flex-shrink:0;height:32px;padding:0 16px;border-radius:9px;border:2px solid #1C2A18;
  background:#1C2A18;color:#fff;font:700 14px/1 inherit;white-space:nowrap;
}
#spiegami-striscia .sp-esci:hover{background:#000}
@media (max-width:760px){
  #spiegami-striscia{justify-content:space-between;font-size:13px}
  #spiegami-striscia .sp-lungo{display:none}
}

/* l'elemento che si sta spiegando */
.spiegami-mira{outline:3px dashed #F5C542 !important;outline-offset:2px}

/* ---------- il pop-up con la scheda ---------- */
#spiegami-pop{
  position:fixed;z-index:2147483001;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 66px);overflow-y:auto;
  box-sizing:border-box;padding:14px 16px 12px;border-radius:14px;
  background:#14200F;color:#EEF4EA;border:1px solid rgba(245,197,66,.6);
  box-shadow:0 24px 60px -16px rgba(0,0,0,.85);
  font:400 13.5px/1.45 'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
}
#spiegami-pop[hidden]{display:none}
#spiegami-pop .sp-nome{font-size:15.5px;font-weight:700;color:#fff;margin:0 26px 8px 0}
#spiegami-pop .sp-chiudi{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;border:none;
  background:transparent;color:inherit;font-size:18px;line-height:1;
}
#spiegami-pop .sp-chiudi:hover{background:rgba(255,255,255,.1)}
#spiegami-pop .sp-stato{margin:0 0 10px;padding:8px 10px;border-radius:9px;background:rgba(248,113,113,.14);
  border:1px solid rgba(248,113,113,.45);color:#FDE2E2}
#spiegami-pop .sp-stato b{color:#fff}
#spiegami-pop dl{margin:0}
#spiegami-pop dt{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#F5C542;margin-top:8px}
#spiegami-pop dd{margin:2px 0 0}
#spiegami-pop .sp-esempio{background:rgba(255,255,255,.06);border-radius:8px;padding:6px 8px}
#spiegami-pop .sp-dascrivere{margin-top:10px;padding:7px 10px;border-radius:9px;background:rgba(245,197,66,.14);
  color:#F8E3A3;font-weight:600}
#spiegami-pop .sp-chiave{margin-top:10px;font-size:11px;color:rgba(238,244,234,.45)}
.light #spiegami-pop{background:#fff;color:#1C2A18;border-color:#D9A514;box-shadow:0 24px 60px -16px rgba(28,42,24,.4)}
.light #spiegami-pop .sp-nome{color:#1C2A18}
.light #spiegami-pop dt{color:#8A6400}
.light #spiegami-pop .sp-stato{background:#FBECEA;color:#7A2B22;border-color:#E9B4AC}
.light #spiegami-pop .sp-stato b{color:#7A2B22}
.light #spiegami-pop .sp-esempio{background:#F1F4EE}
.light #spiegami-pop .sp-dascrivere{background:#FFF4D6;color:#6B4E00}
.light #spiegami-pop .sp-chiave{color:#7A8775}
.light #spiegami-pop .sp-chiudi:hover{background:#F1F4EE}

/* ---------- «Spiegami la pagina» (Francesco, 11-10-2026; js/spiegami-pagina.js) ----------
   Una finestra a destra, alta quanto lo schermo, coi quattro blocchi fissi
   e la parte viva «Adesso qui hai da fare». Il velo dietro la chiude. */
.spp-velo{position:fixed;inset:0;z-index:2147482000;background:rgba(0,0,0,.45);display:flex;justify-content:flex-end}
.spp-velo[hidden]{display:none}
.spp-finestra{
  width:min(520px,100vw);height:100%;box-sizing:border-box;display:flex;flex-direction:column;
  background:#14200F;color:#EEF4EA;border-left:1px solid rgba(140,224,122,.35);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.8);
  font:400 14.5px/1.5 'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
}
.spp-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.spp-nome{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8CE07A}
.spp-chiudi{height:34px;padding:0 16px;border-radius:9px;border:1px solid rgba(255,255,255,.25);
  background:transparent;color:inherit;font:700 14px/1 inherit;cursor:pointer}
.spp-chiudi:hover{background:rgba(255,255,255,.1)}
.spp-corpo{flex:1;overflow-y:auto;padding:16px 20px 28px}
.spp-titolo{margin:0 0 10px;font-size:22px;font-weight:700;color:#fff}
.spp-premessa{margin:0 0 14px;color:rgba(238,244,234,.8)}
.spp-blocco{margin:0 0 18px}
.spp-blocco h3{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#F5C542}
.spp-blocco p{margin:0}
.spp-blocco ul,.spp-blocco ol{margin:0;padding-left:22px}
.spp-blocco li{margin:0 0 6px}
.spp-blocco a{color:#8CE07A;font-weight:600}
.spp-altri{margin-top:8px !important;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.06)}
.spp-viva{padding:12px 14px;border-radius:12px;border:1px solid rgba(245,197,66,.55);background:rgba(245,197,66,.08)}
.spp-perche{color:rgba(238,244,234,.7)}
.spp-attesa{color:rgba(238,244,234,.7)}
.light .spp-finestra{background:#fff;color:#1C2A18;border-left-color:#E4EADF;box-shadow:-24px 0 60px -20px rgba(28,42,24,.35)}
.light .spp-barra{border-bottom-color:#E4EADF}
.light .spp-nome{color:#3E7F33}
.light .spp-chiudi{border-color:#C9D3C3}
.light .spp-chiudi:hover{background:#F1F4EE}
.light .spp-titolo{color:#1C2A18}
.light .spp-premessa,.light .spp-perche,.light .spp-attesa{color:#56634F}
.light .spp-blocco h3{color:#8A6400}
.light .spp-blocco a{color:#3E7F33}
.light .spp-altri{background:#F1F4EE}
.light .spp-viva{background:#FFF8E6;border-color:#E8C35A}
@media (max-width:760px){
  .spp-finestra{width:100vw;border-left:none}
  .spp-corpo{padding:14px 16px 24px}
}

/* sul telefono sta in basso e non copre più di due terzi dello schermo */
@media (max-width:760px){#spiegami-pop{max-height:70vh}}