/* Il «?» in apice accanto a un requisito, con la nuvola che spiega che cos'è e come si ottiene
   (resources/views/partials/requisito-guida.php). Non dipende da Bootstrap né dalle icone: serve
   anche alle pagine pubbliche. Si apre con il mouse, la tastiera (focus) o il tocco
   (public/assets/js/requisito-guida.js). Sul telefono diventa un riquadro in basso. */
.req-guida-sup { position: relative; top: -.05em; margin-left: 0; font-size: 100%; line-height: 0; vertical-align: super; }
.req-guida {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #6c7a82; color: #fff;
  font: 600 .72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: help; vertical-align: baseline;
}
.req-guida:hover, .req-guida:focus-within, .req-guida.is-open { background: var(--req-guida-accent, #315f64); }
.req-guida:focus-visible { outline: 2px solid var(--req-guida-accent, #315f64); outline-offset: 2px; }
.req-guida-nuvola {
  display: none; position: absolute; z-index: 1090; left: -1rem; top: calc(100% + 9px);
  width: 20rem; max-width: 80vw; padding: 16px 16px; background: #fff; color: #212529;
  border: 1px solid rgba(0, 0, 0, .15); border-radius: .5rem; box-shadow: none;
  font: 400 .85rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left;
  text-transform: none; letter-spacing: 0; white-space: normal; cursor: auto;
}
/* Il ponte invisibile tra il «?» e la nuvola: il mouse ci passa senza chiuderla. */
.req-guida-nuvola::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* Il passaggio del mouse solo dove c'è un mouse: sul telefono il «hover» resterebbe attaccato
   dopo il tocco e la nuvola non si chiuderebbe più. */
@media (hover: hover) { .req-guida:hover .req-guida-nuvola { display: block; } }
.req-guida:focus-within .req-guida-nuvola,
.req-guida.is-open .req-guida-nuvola { display: block; }
.req-guida-titolo { display: block; margin-bottom: 8px; font-weight: 600; }
.req-guida-blocco { display: block; margin-bottom: 8px; }
.req-guida-nota { display: block; color: #6c7a82; font-size: .78rem; }
.req-guida-nuvola a { display: inline-block; margin-top: 8px; font-weight: 600; }
.req-guida-chiudi { display: none; }
@media (max-width: 575.98px) {
  .req-guida { position: static; }
  .req-guida-nuvola {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; top: auto; width: auto; max-width: none;
    max-height: 70vh; overflow-y: auto; box-shadow: none;
  }
  .req-guida-nuvola::before { display: none; }
  .req-guida-chiudi { display: block; margin: 8px 0 0 auto; padding: 8px 16px; border: 1px solid #c8d2d6; border-radius: 999px; background: #fff; color: #212529; font: inherit; font-size: .8rem; }
}