/* ---------------------------------------------------------------------------------------
   strumenti.css — gli strumenti di «Modello giuridico → AI» (motore js/local/strumenti.js).
   Stesso impianto delle pillole (css/local/pillole.css): una scheda per la domanda o
   l'esito, risposte a tutta larghezza, testo dell'esito in sezioni. I toni dei distintivi
   e delle note sono gli stessi in tutti e cinque gli strumenti.
   --------------------------------------------------------------------------------------- */
.strumento {
  --st-accento: #004494;
  --st-bordo: #dfe3e8;
  --st-fondo: #f7f9fc;
  max-width: 60rem;
}

/* --- testata */
.st-domanda-guida { font-size: 1.15rem; font-weight: 600; color: #1d3557; margin-bottom: .3rem; }
.st-intro { color: #444; }
.st-definizione {
  border-left: 4px solid var(--st-accento);
  background: var(--st-fondo);
  padding: .7rem 1rem;
  margin-bottom: 1.2rem;
  font-size: .95rem;
}
.st-definizione strong { display: block; margin-bottom: .25rem; color: #1d3557; }

/* --- la scheda */
.st-scheda {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--st-accento);
  border-radius: .5rem;
  background: var(--st-fondo);
  margin-bottom: 1.2rem;
}
.st-scheda-esito { background: #fff; border-color: var(--st-bordo); }
.st-avanzamento { height: .45rem; margin-bottom: .9rem; background: #e9edf2; }
.st-avanzamento .progress-bar { background: var(--st-accento); transition: width .3s ease; }
.st-sezione-nome {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: .15rem .6rem;
  border-radius: 1rem;
  border: 1px solid currentColor;
  color: var(--st-accento);
  background: #fff;
  margin-bottom: .6rem;
}
.st-sez-B { color: #b45309; }
.st-sez-C { color: #047857; }
.st-sez-D { color: #7c3aed; }
.st-sez-E { color: #be123c; }
.st-titolo { font-size: 1.2rem; line-height: 1.4; margin-bottom: .8rem; }
.st-titolo:focus { outline: none; }
.st-aiuto {
  font-size: .9rem;
  color: #374151;
  background: #fff;
  border: 1px dashed var(--st-bordo);
  border-radius: .4rem;
  padding: .5rem .8rem;
  margin-bottom: .9rem;
}
.st-aiuto p:last-child { margin-bottom: 0; }

.st-risposte { display: flex; flex-direction: column; gap: .55rem; }
.st-risposta {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  width: 100%;
  padding: .65rem .9rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--st-bordo);
  border-radius: .4rem;
  color: inherit;
  cursor: pointer;
}
.st-risposta:hover { background: #edf2f7; border-color: #b8c4d4; }
.st-risposta:focus-visible { outline: 2px solid var(--st-accento); outline-offset: 2px; }
.st-radio {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: .2rem;
  border: 2px solid var(--st-accento);
  border-radius: 50%;
}
.st-risposta .form-check-input { flex: 0 0 auto; margin-top: .2rem; }
.st-etichetta-r { display: block; font-weight: 600; }
.st-desc { display: block; font-size: .85rem; color: #555; }
.st-conferma { margin-top: .8rem; }
.st-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; }

/* --- l'esito */
.st-esito-testa { text-align: center; margin-bottom: 1rem; }
.st-icona { font-size: 2.2rem; line-height: 1; margin-bottom: .4rem; }
.st-distintivo {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 1rem;
  margin-bottom: .5rem;
}
.st-sommario { color: #444; }
.st-tono-ok      { background: #d1fae5; color: #065f46; }
.st-tono-warn    { background: #fef3c7; color: #92400e; }
.st-tono-bad     { background: #fee2e2; color: #991b1b; }
.st-tono-info    { background: #e0f2fe; color: #075985; }
.st-tono-blue    { background: #e8eefc; color: #1e3a8a; }
.st-tono-open    { background: #ede9fe; color: #5b21b6; }
.st-tono-neutral { background: #f3f4f6; color: #374151; }
.st-nota { border-radius: .4rem; padding: .6rem .9rem; margin: .8rem 0; font-size: .92rem; }
.st-nota p:last-child { margin-bottom: 0; }
.st-nota a { color: inherit; font-weight: 600; }

.st-profilo { background: var(--st-fondo); border-radius: .4rem; padding: .6rem .9rem; margin-bottom: .8rem; }
.st-profilo h4, .st-sezione h4 { font-size: 1rem; color: #1d3557; margin: .2rem 0 .5rem; }
.st-sezione h5 { font-size: .92rem; color: #1d3557; margin: .8rem 0 .4rem; }
.st-capo { font-size: 1.05rem; color: #1d3557; margin: 1.4rem 0 .3rem; padding-top: .8rem; border-top: 2px solid var(--st-bordo); }
.st-etichette { display: flex; flex-wrap: wrap; gap: .35rem; }
.st-etichetta { font-size: .8rem; padding: .15rem .6rem; border-radius: 1rem; background: #eaf0f8; color: #1d3557; border: 1px solid #c9d6ea; }
.st-et-hi, .st-et-risk { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.st-et-lo, .st-et-std  { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.st-et-open            { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }

.st-sezione { margin: .8rem 0; }
.st-voci { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.st-voce {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem .7rem;
  border-radius: .35rem;
  background: var(--st-fondo);
}
.st-segno { flex: 0 0 1.1rem; font-weight: 700; color: #198754; }
.st-voce-warn { background: #fffbeb; }
.st-voce-warn .st-segno { color: #b45309; }
.st-voce-no .st-segno { color: #b91c1c; }
.st-voce-no .st-voce-testo { color: #6b7280; }
.st-voce-box .st-segno, .st-voce-skip .st-segno { color: #6b7280; }
.st-voce-skip .st-voce-testo { color: #6b7280; }
.st-voce-testo { flex: 1 1 auto; }
.st-art {
  flex: 0 0 auto;
  font-size: .75rem;
  color: #1d3557;
  background: #eaf0f8;
  border-radius: .25rem;
  padding: .05rem .4rem;
  white-space: nowrap;
}
.st-rif { margin-top: 1rem; padding: .6rem .9rem; border-top: 1px solid var(--st-bordo); color: #4b5563; }
.st-rif p:last-child { margin-bottom: 0; }
.st-azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.st-piede { margin-top: .6rem; }

/* --- la lista a punteggio (ALTAI) */
.st-requisiti { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .4rem; }
.st-requisiti li, .st-riga summary { display: flex; align-items: center; gap: .6rem; }
.st-req-num {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-req-nome { flex: 1 1 auto; }
.st-domanda-lista { margin: 0 0 1rem; }
.st-domanda-lista legend { font-size: .98rem; font-weight: 600; margin-bottom: .4rem; float: none; width: auto; }
.st-opzioni { display: flex; flex-wrap: wrap; gap: .4rem; }
.st-opzioni .btn { text-align: center; min-width: 7rem; }
.st-op-hint { font-size: .72rem; opacity: .8; }
.st-complessivo { border-radius: .5rem; padding: .9rem 1.1rem; margin-bottom: 1rem; text-align: center; }
.st-complessivo .st-pct { font-size: 2rem; font-weight: 700; }
.st-stato-ok.st-complessivo      { background: #f0fdf4; color: #065f46; border: 1px solid #a7f3d0; }
.st-stato-partial.st-complessivo { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.st-stato-bad.st-complessivo     { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.st-stato-na.st-complessivo      { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }
.st-righe { display: flex; flex-direction: column; gap: .4rem; }
.st-riga { border: 1px solid var(--st-bordo); border-radius: .4rem; padding: .5rem .7rem; background: #fff; }
.st-riga summary { cursor: pointer; list-style: none; }
.st-riga summary::-webkit-details-marker { display: none; }
.st-barretta { flex: 0 0 8rem; height: .45rem; background: #e5e7eb; border-radius: 1rem; overflow: hidden; }
.st-barretta span { display: block; height: 100%; background: #9ca3af; }
.st-stato-ok .st-barretta span { background: #10b981; }
.st-stato-partial .st-barretta span { background: #f59e0b; }
.st-stato-bad .st-barretta span { background: #ef4444; }
.st-req-pct { flex: 0 0 3rem; text-align: right; font-weight: 600; }
.st-req-stato { flex: 0 0 7rem; font-size: .8rem; text-align: right; color: #4b5563; }
.st-det { display: flex; gap: .5rem; padding: .35rem 0 0 2.2rem; font-size: .9rem; }
.st-gap { margin-top: 1.2rem; padding: .7rem .9rem; border-radius: .4rem; background: #fffbeb; }
.st-gap h4 { font-size: 1rem; color: #92400e; }
.st-gap .st-det { padding-left: 0; }

@media (max-width: 576px) {
  .st-barretta { flex-basis: 4rem; }
  .st-req-stato { display: none; }
  .st-voce { flex-wrap: wrap; }
}