/* =============================================================================
   Value Proposition Buddy — foglio di stile unico.
   Mobile-first: le regole di base valgono per il telefono, che è dove il tool
   viene usato davvero. Il desktop aggiunge solo respiro.
   ========================================================================== */

:root {
  --rosso: #e2000f;
  --rosso-scuro: #b4000c;
  --scuro: #0b1f2a;
  --testo: #14232c;
  --tenue: #5b6b75;
  --bordo: #dfe5e9;
  --fondo: #f4f7f9;
  --carta: #ffffff;
  --acqua: #0e7c9d;
  --ok: #1a7f5a;
  --attenzione: #a86400;
  --raggio: 14px;
  --ombra: 0 1px 2px rgba(11, 31, 42, .06), 0 4px 16px rgba(11, 31, 42, .06);
  --gutter: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 92px;
  background: var(--fondo);
  color: var(--testo);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

.contenitore { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }

/* --- testata -------------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--scuro); color: #fff;
  padding: calc(env(safe-area-inset-top) + 12px) 0 0;
}
.testata-riga { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.testata-riga > div { flex: 1; min-width: 0; }
.occhiello {
  margin: 0; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #8fa8b5; font-weight: 600;
}
.testata h1 { margin: 2px 0 0; font-size: 19px; line-height: 1.25; font-weight: 650; }
.icona {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; font-size: 19px; cursor: pointer; line-height: 1;
}
.icona:active { background: rgba(255,255,255,.16); }
.avanzamento { height: 3px; background: rgba(255,255,255,.14); }
.avanzamento span {
  display: block; height: 100%; width: 20%; background: var(--rosso);
  transition: width .25s ease;
}

/* --- contenuto ------------------------------------------------------------ */
main { padding-top: 20px; padding-bottom: 24px; }
.attesa { color: var(--tenue); text-align: center; padding: 48px 0; }

.introduzione { margin: 0 0 18px; color: var(--tenue); font-size: 15px; }

.scheda {
  display: block; width: 100%; text-align: left;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 15px 16px; margin-bottom: 10px; box-shadow: var(--ombra);
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, transform .06s;
}
.scheda:active { transform: scale(.994); }
.scheda:hover { border-color: #b9c6ce; }
.scheda h3 { margin: 0 0 3px; font-size: 16px; font-weight: 650; line-height: 1.3; }
.scheda p { margin: 0; font-size: 13.5px; color: var(--tenue); line-height: 1.45; }
.scheda.scelta { border-color: var(--rosso); box-shadow: 0 0 0 2px rgba(226,0,15,.12); }

.etichetta-gruppo { margin: 22px 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); }

/* --- pastiglie (livello, competenza) -------------------------------------- */
.pastiglie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pastiglia {
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo);
  border-radius: 999px; padding: 9px 15px; font: inherit; font-size: 14.5px;
  cursor: pointer; transition: all .15s;
}
.pastiglia[aria-pressed="true"] { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.pastiglia:disabled { opacity: .32; cursor: not-allowed; }

/* --- bisogni -------------------------------------------------------------- */
.bisogno { position: relative; padding-left: 50px; }
.bisogno .spunta {
  position: absolute; left: 16px; top: 15px;
  width: 22px; height: 22px; border: 2px solid #c3ced5; border-radius: 6px;
  display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700;
}
.bisogno.scelta .spunta { background: var(--rosso); border-color: var(--rosso); }
.peso {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: #eef3f6; color: var(--tenue); font-size: 11px; font-weight: 700;
  vertical-align: 2px;
}
.badge-roadmap {
  display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 999px;
  background: #fff4e0; color: var(--attenzione); font-size: 11.5px; font-weight: 700;
}

/* --- dettaglio ------------------------------------------------------------
   Attaccato visivamente alla scheda del bisogno che lo precede: sono la
   stessa cosa, non due elementi in fila. */
.bisogno { margin-bottom: 0; border-radius: var(--raggio) var(--raggio) 0 0; }
.dettaglio {
  background: var(--carta); border: 1px solid var(--bordo); border-top: 0;
  border-radius: 0 0 var(--raggio) var(--raggio); box-shadow: var(--ombra);
  margin-bottom: 14px; overflow: hidden;
}
.dettaglio > summary {
  padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: var(--acqua); list-style: none; display: flex; align-items: center; gap: 8px;
}
.dettaglio > summary::-webkit-details-marker { display: none; }
.dettaglio > summary::after { content: "＋"; margin-left: auto; color: var(--tenue); font-weight: 400; font-size: 15px; }
.dettaglio[open] > summary::after { content: "－"; }
.dettaglio-corpo { padding: 0 16px 16px; }

.blocco { margin: 0 0 14px; }
.blocco h4 {
  margin: 0 0 4px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--acqua);
}
.blocco p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.blocco.implicazione { border-left: 3px solid var(--rosso); padding-left: 12px; }

.elenco-domande { margin: 0; padding-left: 18px; font-size: 14.5px; }
.elenco-domande li { margin-bottom: 7px; }

.dati { border-collapse: collapse; width: 100%; font-size: 13.5px; margin-top: 4px; }
.dati td { border-bottom: 1px solid var(--bordo); padding: 7px 0; vertical-align: top; }
.dati td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 10px; }
.dati tr.interno td { color: var(--tenue); }
.solo-interno { font-size: 11px; font-weight: 700; color: var(--attenzione); }

.obiezione { background: #f7fafb; border: 1px solid var(--bordo); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 9px; font-size: 14px; }
.obiezione b { display: block; margin-bottom: 4px; }
.obiezione i { color: var(--tenue); }

.collegamenti { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.collegamenti a, .collegamenti span {
  font-size: 13px; padding: 6px 11px; border-radius: 999px;
  background: #eef3f6; color: var(--acqua); text-decoration: none; font-weight: 600;
}
.collegamenti span { color: var(--tenue); font-weight: 500; }

.nota-avviso {
  background: #fff8ec; border: 1px solid #f0dcb8; border-radius: 10px;
  padding: 11px 13px; font-size: 13.5px; color: #6b4a00; margin-bottom: 14px;
}

/* --- riordino ------------------------------------------------------------- */
.ordinabile { list-style: none; margin: 0; padding: 0; }
.ordinabile li {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); padding: 13px 14px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 12px; touch-action: none;
}
.ordinabile li.trascinata { opacity: .45; }
.numero {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rosso); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.ordinabile li span.testo { flex: 1; font-size: 15px; line-height: 1.35; }
.frecce { display: flex; flex-direction: column; gap: 3px; }
.frecce button {
  width: 34px; height: 24px; border: 1px solid var(--bordo); background: var(--carta);
  border-radius: 7px; cursor: pointer; font-size: 12px; line-height: 1; color: var(--tenue);
}
.frecce button:disabled { opacity: .3; cursor: default; }

/* --- campo di testo ------------------------------------------------------- */
label.campo { display: block; margin-bottom: 16px; }
label.campo span { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
label.campo input {
  width: 100%; padding: 12px 13px; border: 1px solid var(--bordo); border-radius: 10px;
  font: inherit; font-size: 16px; background: var(--carta);
}
label.campo input:focus { outline: 2px solid var(--acqua); outline-offset: -1px; }

/* --- barra azioni --------------------------------------------------------- */
.barra-azioni {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--bordo);
  padding: 10px 0 calc(env(safe-area-inset-bottom) + 10px);
}
.barra-azioni-riga { display: flex; align-items: center; gap: 12px; }
.stato { flex: 1; margin: 0; font-size: 13px; color: var(--tenue); }
.primario {
  flex: 0 0 auto; background: var(--rosso); color: #fff; border: 0;
  border-radius: 11px; padding: 13px 26px; font: inherit; font-size: 16px;
  font-weight: 650; cursor: pointer;
}
.primario:active { background: var(--rosso-scuro); }
.primario:disabled { background: #c6ced3; cursor: not-allowed; }

.riepilogo {
  background: #eef3f6; border-radius: var(--raggio); padding: 13px 15px;
  margin-bottom: 18px; font-size: 14px;
}
.riepilogo b { color: var(--scuro); }
.riepilogo .potere { color: var(--tenue); font-size: 13px; }

@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .testata h1 { font-size: 22px; }
  main { padding-top: 26px; }
}