/* ==========================================================================
   Pagine "Gestionali su misura" — stesso stile del portfolio (style.css)
   ========================================================================== */

:root{
  --demo:#6B8F7B;          /* verde salvia della demo */
  --demo-pale:#EEF3F0;
  --warn:#B7791F; --warn-pale:#FBF3E6;
  --ok:#3E8A5F;
}

.g-hero{ padding:4rem 0 3rem; border-bottom:1px solid var(--gray-light); }
.g-hero .section-inner{ max-width:900px; }
.g-hero h1{ font-size:clamp(2rem,4vw,2.9rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:.4rem 0 1rem; }
.g-hero p{ color:var(--gray-dark); font-size:1.05rem; max-width:680px; margin:0 0 1.5rem; }
.g-azioni{ display:flex; gap:.75rem; flex-wrap:wrap; }
.g-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; padding:.8rem 1.4rem; border-radius:999px;
  background:var(--black); color:var(--white); transition:background .2s, transform .2s; }
.g-btn:hover{ background:var(--blue); transform:translateY(-1px); }
.g-btn.chiaro{ background:var(--white); color:var(--black); border:1px solid var(--gray-light); }
.g-btn.chiaro:hover{ border-color:var(--black); background:var(--white); }
.g-btn.demo{ background:var(--demo); }
.g-btn.demo:hover{ background:#557564; }

/* ---------- Guida: indice laterale + contenuto ---------- */
.guida{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:3rem; max-width:1180px; margin:0 auto; padding:2.5rem 1.75rem 5rem; }
.indice{ position:sticky; top:84px; align-self:start; max-height:calc(100vh - 100px); overflow-y:auto; padding-right:.5rem; font-size:.9rem; }
.indice-cerca{ width:100%; padding:.6rem .8rem; border:1px solid var(--gray-light); border-radius:10px; font:inherit; font-size:.9rem; margin-bottom:1rem; outline:none; }
.indice-cerca:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-pale); }
.indice ol{ list-style:none; margin:0; padding:0; counter-reset:cap; }
.indice > ol > li{ counter-increment:cap; margin-bottom:.35rem; }
.indice > ol > li > a{ display:flex; gap:.5rem; font-weight:600; color:var(--black); padding:.3rem .5rem; border-radius:8px; }
.indice > ol > li > a::before{ content:counter(cap); font-family:var(--font-mono); font-size:.75rem; color:var(--gray-mid); min-width:1.1rem; padding-top:.1rem; }
.indice ol ol{ margin:.1rem 0 .4rem 1.6rem; }
.indice ol ol a{ display:block; color:var(--gray-dark); padding:.2rem .5rem; border-radius:6px; font-size:.85rem; }
.indice a:hover{ color:var(--blue); }
.indice a.attivo{ background:var(--blue-pale); color:var(--blue); }
.indice-apri{ display:none; }

.contenuto{ min-width:0; max-width:760px; }
.contenuto section{ scroll-margin-top:90px; }
.capitolo{ padding-top:1rem; margin-top:2.5rem; border-top:1px solid var(--gray-light); }
.capitolo:first-of-type{ border-top:0; margin-top:0; }
.capitolo > h2{ font-size:1.75rem; font-weight:800; letter-spacing:-.01em; margin:.2rem 0 .5rem; }
.cap-num{ font-family:var(--font-mono); font-size:.8rem; font-weight:600; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; }
.contenuto h3{ font-size:1.2rem; font-weight:700; margin:2.2rem 0 .5rem; scroll-margin-top:90px; }
.contenuto h4{ font-size:.95rem; font-weight:700; margin:1.4rem 0 .35rem; }
.contenuto p, .contenuto li{ color:#333; font-size:1rem; }
.contenuto p{ margin:.5rem 0; }
.contenuto ul{ padding-left:1.2rem; }
.contenuto li{ margin:.3rem 0; }
.contenuto b{ color:var(--black); }
.serve{ font-size:1.05rem; color:var(--gray-dark) !important; border-left:3px solid var(--blue); padding-left:.9rem; }

/* Passi numerati */
.passi{ list-style:none; counter-reset:p; padding:0 !important; margin:1rem 0; }
.passi > li{ counter-increment:p; position:relative; padding:.55rem 0 .55rem 2.6rem; margin:0; border-bottom:1px dashed var(--gray-light); }
.passi > li:last-child{ border-bottom:0; }
.passi > li::before{ content:counter(p); position:absolute; left:0; top:.55rem; width:1.75rem; height:1.75rem; border-radius:50%;
  display:grid; place-items:center; font-size:.8rem; font-weight:700; background:var(--black); color:var(--white); }

/* Nomi di pulsanti e campi, come appaiono nel gestionale */
.ui{ display:inline-block; font-size:.88em; font-weight:600; padding:.05rem .45rem; border-radius:6px; background:var(--gray-pale); border:1px solid var(--gray-light); color:var(--black); white-space:nowrap; }
kbd{ font-family:var(--font-mono); font-size:.8em; padding:.05rem .35rem; border:1px solid var(--gray-light); border-bottom-width:2px; border-radius:5px; background:var(--white); }

/* Riquadri */
.box{ border-radius:12px; padding:.9rem 1.1rem; margin:1rem 0; font-size:.95rem; }
.box p{ margin:.25rem 0; font-size:.95rem; }
.box-titolo{ font-weight:700; display:block; margin-bottom:.2rem; }
.box.nota{ background:var(--blue-pale); }
.box.attenzione{ background:var(--warn-pale); border:1px solid #F0DDBB; }
.box.attenzione .box-titolo{ color:var(--warn); }
.box.dopo{ background:var(--gray-pale); }
.box.privacy{ background:var(--demo-pale); }
.box.privacy .box-titolo{ color:#3F6F5E; }

.prova{ display:inline-flex; align-items:center; gap:.4rem; margin:.6rem 0 .2rem; font-weight:600; font-size:.9rem; color:var(--demo);
  border:1px solid var(--demo); padding:.45rem .9rem; border-radius:999px; transition:background .2s, color .2s; }
.prova:hover{ background:var(--demo); color:var(--white); }

figure.schermo{ margin:1.2rem 0; }
figure.schermo img{ border-radius:12px; border:1px solid var(--gray-light); box-shadow:var(--shadow-card); }
figure.schermo figcaption{ font-size:.85rem; color:var(--gray-dark); margin-top:.5rem; }

.tabella{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:.93rem; }
.tabella th, .tabella td{ text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--gray-light); vertical-align:top; }
.tabella th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-dark); font-weight:600; }

details.faq{ border:1px solid var(--gray-light); border-radius:12px; padding:.8rem 1rem; margin:.6rem 0; }
details.faq summary{ cursor:pointer; font-weight:600; }
details.faq[open] summary{ margin-bottom:.4rem; }

.nessun-risultato{ display:none; color:var(--gray-dark); padding:1rem 0; }
.nascosto-ricerca{ display:none !important; }
mark{ background:#FFF1A8; padding:0 .1rem; border-radius:3px; }

/* ---------- Telefono ---------- */
@media (max-width: 900px){
  .guida{ grid-template-columns:1fr; gap:0; padding-top:1rem; }
  .indice{ position:fixed; inset:0; z-index:200; max-height:none; background:var(--white); padding:1.25rem 1.5rem 2rem; transform:translateX(-100%); transition:transform .25s; }
  .indice.aperto{ transform:none; }
  .indice-apri{ display:flex; align-items:center; gap:.5rem; position:sticky; top:62px; z-index:50; width:100%; margin:0 0 1rem; padding:.7rem 1rem;
    font:inherit; font-weight:600; border:1px solid var(--gray-light); border-radius:12px; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); }
  .indice-chiudi{ display:block !important; margin-bottom:1rem; }
  .ui{ white-space:normal; }
}
.indice-chiudi{ display:none; font:inherit; font-weight:600; padding:.5rem .9rem; border:1px solid var(--gray-light); border-radius:999px; background:var(--white); }
@media (max-width: 600px){
  .main-nav{ gap:1rem; }
  .logo-text em{ display:none; }
}

/* Guida dentro il gestionale: ritorno all'app sempre visibile (anche sul telefono) */
.torna{ font-weight:600; font-size:.95rem; color:var(--black); padding:.4rem .2rem; }
.torna:hover{ color:var(--blue); }