/* THE AI LAB · Portale v2 (cantiere portale-v2, docs/portale.md «Portale v2»): I tuoi sistemi, Moduli e pacchetti, Nuovo audit, Cosa possiamo automatizzare.
   Stesso vestito di portale.css (grafite, viola, ambra, vetro), stesse regole: telefono prima, tocchi da 46 px, un solo gesto principale per carta, si animano solo transform e opacity.
   Tutte le classi cominciano per «p-» e non toccano il resto. */

/* ---------- le tre porte della home ---------- */
.p-porte { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-porta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 124px; padding: 14px 12px 12px; border-radius: 20px; border: 1px solid var(--p-linea); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); text-decoration: none; color: inherit;
  transition: transform .2s var(--p-curva), border-color .2s, background .2s; -webkit-tap-highlight-color: transparent; position: relative; }
.p-porta:hover { transform: translateY(-2px); border-color: var(--p-linea-forte); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)); }
.p-porta > .p-i:last-child { position: absolute; top: 14px; right: 12px; color: var(--p-testo-3); width: 1rem; height: 1rem; }
.p-porta .p-tessera { width: 40px; height: 40px; border-radius: 13px; }
.p-porta-testo { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .p-porta-testo strong { font-size: .98rem; font-weight: 800; line-height: 1.2; } .p-porta-testo small { color: var(--p-testo-2); font-size: .8rem; line-height: 1.3; }
.p-porta.in-evidenza { border-color: rgba(245, 165, 36, .45); background: radial-gradient(120% 140% at 0% 0%, rgba(245, 165, 36, .14), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); }
.p-porta.in-evidenza .p-tessera { background: rgba(245, 165, 36, .18); color: #FCD34D; }
@media (min-width: 720px) { .p-porta { flex-direction: row; align-items: center; gap: 14px; min-height: 92px; padding: 14px 16px; } .p-porta > .p-i:last-child { position: static; margin-left: auto; } .p-porta-testo strong { font-size: 1.04rem; } .p-porta-testo small { font-size: .86rem; } }

/* ---------- ancore e carte dei sistemi ---------- */
.p-ancore { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.p-ancore::-webkit-scrollbar { display: none; }
.p-ancore a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--p-linea); background: rgba(255, 255, 255, .04); color: var(--p-testo-2); text-decoration: none; font-weight: 700; font-size: .86rem; }
.p-ancore a:hover { color: var(--p-testo); border-color: var(--p-linea-forte); }
@media (min-width: 1024px) { .p-ancore { margin: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; } }
section[id] { scroll-margin-top: 78px; } article[id] { scroll-margin-top: 78px; }
.p-sistemi { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .p-sistemi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-sistema { display: flex; flex-direction: column; gap: 14px; }
.p-sistema-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.p-sistema-testa h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; min-width: 0; flex: 1 1 12rem; }
.p-passi-compatti { gap: 8px; } .p-passi-compatti li { font-size: .93rem; color: var(--p-testo-2); } .p-passi-compatti .p-passo { width: 1.45rem; height: 1.45rem; font-size: .72rem; margin-top: .08rem; }
.p-voci-compatte li { padding: 8px 0; align-items: center; }
.p-sistema .p-kpi-griglia { margin: 0; } .p-sistema .p-barre { height: 36px; }
.p-sistema .p-azioni-riga { margin-top: auto; padding-top: .3rem; }
.p-sistema .p-azioni-riga form { margin: 0; }
.p-avviso-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(245, 165, 36, .1); border: 1px solid rgba(245, 165, 36, .28); color: #FCE7B2; font-size: .9rem; }
.p-avviso-card .p-i { color: var(--p-ambra); margin-top: .1rem; }

/* ---------- la chat sul sito ---------- */
.p-chat { display: flex; flex-direction: column; gap: 14px; }
.p-chat + .p-chat { margin-top: 16px; }
.p-chat-colonne { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .p-chat-colonne { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.p-chat-colonna { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.p-chat-colonna .p-h3 { margin: .6rem 0 .1rem; }
.p-chat .p-url { margin: .2rem 0; user-select: all; }
.p-chat textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92rem; min-height: 96px; }
.p-anteprima { margin-top: .6rem; }
.p-anteprima iframe { display: block; width: 100%; height: 440px; border: 1px solid var(--p-linea-forte); border-radius: 16px; background: #fff; }
.p-anteprima[open] summary { margin-bottom: 12px; }
.p-doc-carta { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; } .p-doc-carta > div { flex: 1 1 14rem; min-width: 0; }
.p-araldo { display: flex; flex-direction: column; gap: 14px; }
.p-araldo .p-azioni-riga form { margin: 0; }

/* ---------- cosa possiamo automatizzare ---------- */
.p-aree { display: grid; gap: 16px; }
.p-aree-griglia { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .p-aree-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-area { display: flex; flex-direction: column; gap: 14px; }
.p-area-testa { display: flex; gap: 14px; align-items: flex-start; } .p-area-testa h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 2px; }
.p-area-meta { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .p-area-meta { grid-template-columns: 1fr 1fr; } }
.p-area-meta section { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--p-linea); }
.p-area-meta-araldo { border-color: rgba(245, 165, 36, .22) !important; background: rgba(245, 165, 36, .045) !important; }
.p-area-meta p { color: var(--p-testo-2); font-size: .93rem; }
.p-area-meta .p-h3 { margin-top: 0; }
.p-area-lista { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .88rem; color: var(--p-testo-2); }
.p-area-lista li { position: relative; padding-left: 1.05rem; } .p-area-lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--p-viola); }
.p-area-meta-araldo .p-area-lista li::before { background: var(--p-ambra); }
.p-area-fatto { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.p-chiedi { margin-top: auto; } .p-chiedi summary { width: fit-content; }
.p-chiedi .p-form { padding-top: 2px; }

/* ---------- moduli ---------- */
.p-nota-stima { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(139, 92, 246, .1); border: 1px solid rgba(139, 92, 246, .3); color: #E2D9FF; font-size: .93rem; }
.p-nota-stima .p-i { color: var(--p-viola); margin-top: .1rem; }
.p-moduli { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .p-moduli { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-modulo { display: flex; flex-direction: column; gap: 12px; }
.p-modulo-prezzo { display: flex; flex-wrap: wrap; gap: .1rem .9rem; align-items: baseline; margin: 0; } .p-modulo-prezzo > span { white-space: nowrap; } .p-modulo-prezzo strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; } .p-modulo-prezzo small { color: var(--p-testo-3); font-size: .84rem; }
.p-modulo-motivo { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--p-testo-2); padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); } .p-modulo-motivo .p-i { color: var(--p-ambra); margin-top: .12rem; }
.p-modulo .p-chiedi { margin-top: auto; }

/* ---------- audit ---------- */
.p-audit-avvio { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.p-passi-grandi { gap: 18px; } .p-passi-grandi li { font-size: 1rem; color: var(--p-testo-2); } .p-passi-grandi .p-passo { width: 2rem; height: 2rem; font-size: .95rem; background: linear-gradient(180deg, #9B6DFB, #7B4CEA); } .p-passi-grandi strong { color: var(--p-testo); }
.p-consenso-punti { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; } .p-consenso-punti li { display: flex; gap: 14px; align-items: flex-start; color: var(--p-testo-2); } .p-consenso-punti strong { color: var(--p-testo); }
.p-leggi-tutto { margin: 0 0 18px; } .p-leggi-tutto summary { cursor: pointer; color: var(--p-ambra); font-weight: 700; font-size: .92rem; min-height: 36px; display: flex; align-items: center; } .p-leggi-tutto p { margin-top: .5rem; }
.p-consenso-form { margin-bottom: 12px; }
.p-punteggio { display: flex; align-items: baseline; gap: .3rem; } .p-punteggio strong { font-size: 3.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(180deg, #fff, #CDBBFF); -webkit-background-clip: text; background-clip: text; color: transparent; } .p-punteggio small { color: var(--p-testo-3); font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) { .p-porta { transition: none; } .p-porta:hover { transform: none; } }

/* l'ancora raggiunta si illumina un attimo (solo box-shadow e opacità: niente che faccia ricalcolare la pagina) */
.p-lampo { animation: p-lampo 2.2s var(--p-curva); }
@keyframes p-lampo { 0% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .0); } 18% { box-shadow: 0 0 0 3px rgba(245, 165, 36, .55); } 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); } }
@media (prefers-reduced-motion: reduce) { .p-lampo { animation: none; } }

/* il «cosa fa» di un sistema e «cosa facciamo» di un'area si aprono a richiesta (sul telefono la pagina resta corta); sul computer si aprono da soli (portale_v2.js) */
.p-cosa-fa > summary, .p-area-dettagli > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; color: var(--p-ambra); font-weight: 700; font-size: .9rem; }
.p-cosa-fa > summary::-webkit-details-marker, .p-area-dettagli > summary::-webkit-details-marker { display: none; }
.p-cosa-fa > summary .p-i, .p-area-dettagli > summary .p-i { width: .95rem; height: .95rem; transition: transform .2s var(--p-curva); }
.p-cosa-fa[open] > summary .p-i, .p-area-dettagli[open] > summary .p-i { transform: rotate(90deg); }
.p-cosa-fa .p-passi, .p-area-dettagli .p-area-meta { margin-top: .6rem; }
.p-riga-testo .p-mono { word-break: normal; overflow-wrap: anywhere; }

/* una riga con un testo lungo e un'etichetta a destra: sul telefono l'etichetta scende sotto, allineata al testo */
@media (max-width: 560px) { .p-riga.p-riga-impila { flex-wrap: wrap; } .p-riga-impila .p-riga-dx { flex-direction: row; align-items: center; gap: 10px; width: 100%; text-align: left; padding-left: 58px; } }

/* ---------- Araldo: quattro numeri, livello attuale, scelta del pacchetto nella proposta ---------- */
.p-kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .p-kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-livello-attuale { margin: -.2rem 0 .8rem; }
.p-scelta-pacchetto { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; border: 1px solid var(--p-linea-forte); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); margin: 0 0 18px; }
.p-scelta-pacchetto fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .p-scelta-pacchetto legend { padding: 0; margin-bottom: 4px; }
.p-pacchetti { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .p-pacchetti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-pacchetto { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; border: 1px solid var(--p-linea); background: rgba(255, 255, 255, .04); cursor: pointer; min-height: 56px; }
.p-pacchetto:has(input:checked) { border-color: var(--p-ambra); background: rgba(245, 165, 36, .08); }
.p-pacchetto.consigliato { border-color: rgba(139, 92, 246, .55); }
.p-pacchetto input { margin-top: .25rem; width: 1.2rem; height: 1.2rem; accent-color: var(--p-ambra); flex: none; }
.p-pacchetto-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .p-pacchetto-corpo > strong { font-size: 1.08rem; }
.p-pacchetto-prezzo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .p-pacchetto-prezzo small { font-size: .8rem; font-weight: 600; color: var(--p-testo-3); letter-spacing: 0; }
.p-pacchetto-corpo small { color: var(--p-testo-2); font-size: .86rem; line-height: 1.35; } .p-pacchetto-voci { color: var(--p-testo-3) !important; }