/* ---------------------------------------------------------------------------------------
   pillole.css — le pagine di «GDU in pillole» (motore js/local/pillole.js).
   L'impianto e' quello di flow-manager.ifac.cnr.it, da cui vengono i flussi: testata con
   descrizione e cartellini, barra di avanzamento, una scheda per il nodo (domanda con le
   risposte numerate, oppure esito), il percorso fatto in fondo. Il blu e' quello del sito
   d'origine (il blu della Commissione europea), il verde dell'esito quello di Bootstrap.
   --------------------------------------------------------------------------------------- */
.pillola {
  --pil-accento: #004494;
  --pil-esito: #198754;
  --pil-fondo: #f7f9fc;
  --pil-bordo: #dfe3e8;
  max-width: 60rem;
}


/* --- testata */
.pil-descrizione { font-size: 1.05rem; color: #444; margin-bottom: .6rem; }
.pil-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.pil-cartellino {
  font-size: .8rem;
  padding: .2rem .6rem;
  border: 1px solid #c9d6ea;
  border-radius: 1rem;
  background: #eaf0f8;
  color: #1d3557;
}
.pil-azioni { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- avanzamento */
.pil-avanzamento { height: .5rem; margin: 1rem 0 1.2rem; background: #e9edf2; }
.pil-avanzamento .pil-barra { background: var(--pil-accento); transition: width .3s ease; }

.pil-conferma .pil-azioni { margin-top: .2rem; }

/* --- la scheda del nodo */
.pil-nodo {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--pil-accento);
  border-radius: .5rem;
  background: var(--pil-fondo);
  margin-bottom: 1.4rem;
}
.pil-nodo.pil-esito { border-color: var(--pil-esito); background: #fff; }
.pil-titolo { font-size: 1.3rem; line-height: 1.4; margin-bottom: 1rem; }
/* il titolo prende il fuoco a ogni passo solo perche' un lettore di schermo legga il nodo
   nuovo: non e' un comando, e una cornice intorno farebbe pensare il contrario */
.pil-titolo:focus { outline: none; }
.pil-icona-nodo { color: var(--pil-accento); }
.pil-esito .pil-icona-nodo { color: var(--pil-esito); }

.pil-risposte { display: flex; flex-direction: column; gap: .6rem; }
.pil-risposta {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .7rem .9rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--pil-bordo);
  border-radius: .4rem;
  color: inherit;
  animation: pil-entra .25s ease both;
}
.pil-risposta:hover { background: #edf2f7; border-color: #b8c4d4; }
.pil-risposta:focus-visible { outline: 2px solid var(--pil-accento); outline-offset: 2px; }
.pil-risposta .pil-etichetta { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.pil-risposta .bi { color: var(--pil-accento); }
.pil-risposta .bi-flag-fill { color: var(--pil-esito); }

.pil-numero {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pil-accento);
  color: #fff;
  font-size: .85rem;
}

@keyframes pil-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pil-risposta { animation: none; }
  .pil-avanzamento .pil-barra { transition: none; }
}

/* --- il testo dell'esito (Markdown): i titoli ## e ### arrivano come h4 e h5 */
.pil-corpo { line-height: 1.6; }
.pil-corpo h4 { font-size: 1.15rem; margin: 1.2rem 0 .6rem; color: #1d3557; }
.pil-corpo h5 { font-size: 1.02rem; margin: 1rem 0 .5rem; color: #1d3557; }
.pil-corpo h4:first-child { margin-top: 0; }
.pil-corpo blockquote {
  margin: 1rem 0;
  padding: .6rem 1rem;
  border-left: 4px solid var(--pil-accento);
  background: var(--pil-fondo);
}
.pil-corpo blockquote p:last-child { margin-bottom: 0; }
.pil-corpo table { font-size: .9rem; }
.pil-corpo th { background: #eaf0f8; }
.pil-azioni-esito { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--pil-bordo); }
.pil-azioni-esito:empty { display: none; }

/* --- il percorso */
.pil-percorso h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.pil-passi { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.pil-passo {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .45rem .7rem;
  text-align: left;
  background: var(--pil-fondo);
  border: 1px solid transparent;
  border-radius: .4rem;
  color: inherit;
  font-size: .92rem;
}
button.pil-passo:hover { border-color: var(--pil-bordo); background: #edf2f7; }
.pil-passo .pil-numero { flex-basis: 1.4rem; width: 1.4rem; height: 1.4rem; font-size: .75rem; }
.pil-passo.pil-attuale { background: #e2e8f0; font-weight: 600; }

.pil-fonte { margin-top: 1.2rem; }

/* --- la scheda Approfondimento: testo lungo, quindi una misura di riga leggibile */
.pil-approfondimento { max-width: 60rem; }
.pil-approfondimento ul.small li { margin-bottom: .35rem; }

/* --- stampa: solo il foglio composto da stampa(), tutto il resto fuori */
#pil-stampa { display: none; }
@media print {
  html.pil-in-stampa body > *:not(#pil-stampa) { display: none !important; }
  html.pil-in-stampa #pil-stampa { display: block; font-size: 11pt; color: #000; }
  #pil-stampa .pil-stampa-flusso {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 8.5pt;
    color: #004494;
    margin-bottom: .2rem;
  }
  #pil-stampa h1 { font-size: 18pt; border-bottom: 3px solid #004494; padding-bottom: .3rem; margin-bottom: 1rem; }
  #pil-stampa h2 { font-size: 13pt; color: #004494; margin-top: 1.2rem; }
  /* il foglio sta fuori da .pil-corpo: senza il colore qui prenderebbe quello dei titoli del sito */
  #pil-stampa h4 { font-size: 12pt; color: #1d3557; }
  #pil-stampa h5 { font-size: 11pt; color: #1d3557; }
  #pil-stampa table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  #pil-stampa th, #pil-stampa td { border: 1px solid #999; padding: .25rem .4rem; vertical-align: top; }
  #pil-stampa tr { break-inside: avoid; }
  #pil-stampa blockquote { border-left: 3px solid #004494; padding-left: .8rem; margin-left: 0; }
  #pil-stampa .pil-stampa-fonte { margin-top: 1.5rem; padding-top: .4rem; border-top: 1px solid #999; font-size: 8.5pt; color: #444; }
}