:root {
  /* i colori della locandina: blu notte e rosso. Il rosso del marchio non e'
     quello degli errori (--rosso): negli esiti il rosso vuol dire "bloccante" */
  --blu: #16306B; --blu-medio: #1F4AA8; --blu-chiaro: #E3E9F6; --marchio: #D51F26;
  --fondo: #F4F6FA; --testo: #1d2433; --grigio: #5f6368; --bordo: #d5dbe5;
  --verde: #1E6B2F; --verde-chiaro: #E3F1E6; --ambra: #8a6100; --ambra-chiaro: #FFF4D6;
  --rosso: #B00020; --rosso-chiaro: #FCE4E4; --giallo: #FFF2CC;
  /* lo stampatello stretto della locandina: Bahnschrift e' gia' su ogni Windows,
     niente da scaricare da servizi esterni */
  --titoli: "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
            "Arial Narrow", "Roboto Condensed", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; color: var(--testo);
       background: var(--fondo); font-size: 16px; line-height: 1.5; }
.riga { max-width: 1020px; margin: 0 auto; padding: 0 20px; }
main.riga { padding-top: 28px; padding-bottom: 40px; min-height: 70vh; }
a { color: var(--blu-medio); }

h1, h2, h3, .marchio, .bottone, .stampatello { font-family: var(--titoli); letter-spacing: .01em; }
h1 { color: var(--blu); font-size: 2rem; margin: 0 0 6px; font-weight: 600; }
h2 { color: var(--blu); font-size: 1.35rem; margin: 28px 0 10px; font-weight: 600; text-transform: uppercase; }
.sotto { color: var(--grigio); margin: 0 0 22px; }

/* ---------------- testata e piede ---------------- */
.testata { background: var(--blu); color: #fff; border-bottom: 4px solid var(--marchio); }
.testata .riga { display: flex; align-items: center; justify-content: space-between;
                 flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.marchio { color: #fff; text-decoration: none; font-weight: 600; font-size: 1.6rem;
           display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.logo { width: 38px; height: 38px; display: block; }
/* il motto e' il nome della famiglia di strumenti: si legge, non e' una didascalia */
.marchio small { font-family: "Segoe UI", Arial, sans-serif; text-transform: none; font-size: 1.05rem;
                 opacity: 1; font-weight: 500; border-left: 1px solid rgba(255,255,255,.4);
                 padding-left: 12px; letter-spacing: 0; }
.marchio small.firma { font-size: .85rem; font-weight: 400; opacity: .85; font-style: italic; }
.motto { color: var(--blu); font-size: 1.3rem; font-weight: 600; margin: 0 0 24px; }
nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
nav a, nav .link { color: #fff; text-decoration: none; font-size: .95rem; opacity: .9; }
nav a:hover, nav .link:hover { opacity: 1; text-decoration: underline; }
nav .bottone { margin: 0; padding: 7px 18px; background: var(--marchio); opacity: 1; }
.in-linea { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.piede { color: var(--grigio); font-size: .85rem; padding-bottom: 30px; display: flex;
         gap: 12px; align-items: center; flex-wrap: wrap; }
.piede img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.piede a { color: var(--grigio); }

/* ---------------- elementi comuni ---------------- */
.scheda { background: #fff; border: 1px solid var(--bordo); border-radius: 12px;
          padding: 22px 24px; margin-bottom: 18px; }
.stretta { max-width: 440px; margin: 40px auto; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 6px;
  font: inherit; background: #fff; }
textarea { min-height: 140px; }
.bottone { display: inline-block; background: var(--blu); color: #fff; border: 0;
           border-radius: 8px; padding: 10px 22px; font-size: 1.1rem; font-weight: 600;
           cursor: pointer; text-decoration: none; margin-top: 18px; }
.bottone:hover { filter: brightness(1.15); }
.bottone.secondario { background: #fff; color: var(--blu); border: 1px solid var(--blu); }
.bottone.piccolo { padding: 5px 12px; font-size: .95rem; margin-top: 0; }
.bottone.whatsapp { background: #1FA855; color: #fff; }
.bottone.bianco { background: #fff; color: var(--blu); }

.avviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.avviso.ok { background: var(--verde-chiaro); border-color: #b6d9bd; color: var(--verde); }
.avviso.errore { background: var(--rosso-chiaro); border-color: #f1b8b8; color: var(--rosso); }

/* scelta del gestionale */
.gestionali { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.gestionali a { display: block; padding: 14px; border: 2px solid var(--bordo); border-radius: 10px;
                background: #fff; text-decoration: none; color: var(--blu); text-align: center;
                font-family: var(--titoli); font-size: 1.35rem; }
.gestionali a:hover { border-color: var(--blu-medio); }
.gestionali a.scelto { border-color: var(--blu); background: var(--blu); color: #fff; }

/* guida */
.generale { background: var(--blu-chiaro); border-left: 4px solid var(--blu); padding: 10px 16px;
            border-radius: 6px; }
.generale ul { margin: 6px 0; padding-left: 20px; }
.modello { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bordo); }
.modello:last-child { border-bottom: 0; }
.num { flex: 0 0 30px; height: 30px; border-radius: 15px; background: var(--blu); color: #fff;
       display: grid; place-items: center; font-family: var(--titoli); font-size: 1.05rem; }
.modello h3 { margin: 2px 0; font-size: 1.2rem; color: var(--blu); }
.percorso { color: var(--blu-medio); font-weight: 600; margin: 2px 0 4px; }
.modello ul { margin: 4px 0; padding-left: 20px; }
.quando { background: var(--ambra-chiaro); color: var(--ambra); font-style: italic;
          padding: 4px 10px; border-radius: 4px; margin: 6px 0 0; }

/* caricamento */
.zona { border: 2px dashed var(--blu-medio); border-radius: 12px; padding: 28px; text-align: center;
        background: var(--fondo); cursor: pointer; display: block; }
.zona.sopra { background: var(--blu-chiaro); }
.zona input { display: none; }
.elenco-file { list-style: none; padding: 0; margin: 12px 0 0; font-size: .95rem; }
.elenco-file li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                  padding: 6px 10px; border-bottom: 1px solid var(--bordo); }
.togli { background: none; border: 1px solid var(--bordo); border-radius: 50%; width: 26px; height: 26px;
         cursor: pointer; color: var(--grigio); font-size: 1rem; line-height: 1; }
.togli:hover { color: var(--rosso); border-color: var(--rosso); }
.bottone:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* esito: verde, ambra, rosso — gli stessi tre significati dell'Excel */
.esito { border-radius: 12px; padding: 22px 24px; margin-bottom: 18px; border: 1px solid; }
.esito h1 { font-size: 1.7rem; margin-bottom: 8px; }
.esito.OK { background: var(--verde-chiaro); border-color: #b6d9bd; }
.esito.OK h1 { color: var(--verde); }
.esito.AVVISI { background: var(--ambra-chiaro); border-color: #f0d68a; }
.esito.AVVISI h1 { color: var(--ambra); }
.esito.BLOCCATO, .esito.ERRORE { background: var(--rosso-chiaro); border-color: #f1b8b8; }
.esito.BLOCCATO h1, .esito.ERRORE h1 { color: var(--rosso); }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--grigio); }
pre.log { background: #1d1f23; color: #e6e6e6; padding: 14px; border-radius: 8px;
          overflow-x: auto; font-size: .8rem; max-height: 420px; }
.attesa { text-align: center; padding: 50px 20px; }
.rotella { width: 44px; height: 44px; border: 4px solid var(--blu-chiaro); border-top-color: var(--blu);
           border-radius: 50%; animation: gira 1s linear infinite; margin: 0 auto 18px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* tabelle del pannello */
table { width: 100%; border-collapse: collapse; background: #fff; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { background: var(--blu); color: #fff; font-weight: 600; }
.etichetta { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .8rem; font-weight: 600; }
.etichetta.OK { background: var(--verde-chiaro); color: var(--verde); }
.etichetta.AVVISI { background: var(--ambra-chiaro); color: var(--ambra); }
.etichetta.BLOCCATO, .etichetta.ERRORE, .etichetta.scaduta, .etichetta.disattivo { background: var(--rosso-chiaro); color: var(--rosso); }
.griglia2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.nuovo td { background: var(--giallo); }

/* ---------------- pagina di presentazione: come la locandina ---------------- */
body.vetrina { background: #fff; }
body.vetrina main.riga { padding-top: 0; }
.eroe { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: center;
        padding: 40px 0 26px; }
.eroe h1 { font-size: 3.6rem; line-height: 1; text-transform: uppercase; margin: 14px 0 14px; }
.eroe h1 .rosso { color: var(--marchio); display: block; }
.pillola { display: inline-block; background: var(--blu); color: #fff; border-radius: 30px;
           padding: 5px 18px; font-family: var(--titoli); font-size: 1.15rem; }
.eroe p { font-size: 1.15rem; color: #2c3550; margin: 0; }
.schermo { background: var(--blu-chiaro); border-radius: 16px; padding: 20px; }
.riga-esito { background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
              border-left: 6px solid; font-size: .95rem; }
.riga-esito:last-child { margin-bottom: 0; }
.riga-esito.v { border-color: var(--verde); } .riga-esito.a { border-color: #c68a00; }
.riga-esito.b { border-color: var(--blu-medio); }
.riga-esito b { font-family: var(--titoli); font-size: 1.1rem; display: block; color: var(--blu); }
.fascia-rossa { background: var(--marchio); color: #fff; border-radius: 14px; padding: 12px 20px;
                display: flex; justify-content: space-around; flex-wrap: wrap; gap: 8px 22px;
                font-family: var(--titoli); font-size: 1.3rem; margin: 6px 0 30px; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.riquadro { border: 2px solid var(--blu-chiaro); border-radius: 14px; overflow: hidden; background: #fff; }
.riquadro > h2 { margin: 0; background: var(--blu); color: #fff; padding: 10px 18px; font-size: 1.4rem; }
.riquadro.rosso { border-color: #f4c7c9; }
.riquadro.rosso > h2 { background: #fff; color: var(--blu); border-bottom: 2px solid var(--marchio); }
.riquadro .dentro { padding: 14px 18px; }
.spunte { list-style: none; padding: 0; margin: 0; }
.spunte li { padding: 6px 0 6px 34px; position: relative; font-size: 1.05rem; }
.spunte li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 22px; height: 22px;
                     border-radius: 50%; background: var(--blu); color: #fff; font-size: .8rem;
                     display: grid; place-items: center; font-weight: 700; }
.gest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.gest div { background: var(--blu-chiaro); border-radius: 10px; padding: 14px; text-align: center;
            font-family: var(--titoli); font-size: 1.45rem; color: var(--blu); }
.passi { counter-reset: p; display: grid; gap: 12px; }
.passo { display: flex; gap: 12px; align-items: flex-start; }
.passo::before { counter-increment: p; content: counter(p); flex: 0 0 34px; height: 34px; border-radius: 50%;
                 background: var(--marchio); color: #fff; display: grid; place-items: center;
                 font-family: var(--titoli); font-size: 1.2rem; }
.passo b { font-family: var(--titoli); font-size: 1.2rem; color: var(--blu); display: block; }
.commento { background: var(--fondo); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
            font-style: italic; display: flex; gap: 10px; }
.commento::before { content: "\201C"; color: var(--marchio); font-size: 2.4rem; line-height: .9;
                    font-style: normal; font-family: Georgia, serif; }
.commento span { flex: 1; }
.commento em { font-style: normal; font-weight: 700; color: var(--blu); white-space: nowrap; align-self: flex-end; }
.autore { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; margin: 8px 0 30px; }
.chi { background: var(--blu-chiaro); border-radius: 14px; display: flex; gap: 18px; align-items: center;
       padding: 18px; }
.chi img { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
           border: 4px solid #fff; flex: 0 0 auto; }
.chi h3 { font-size: 1.7rem; color: var(--blu); margin: 0 0 6px; border-bottom: 3px solid var(--marchio);
          display: inline-block; }
.chi p { margin: 0; }
.invito { background: var(--blu); color: #fff; border-radius: 14px; padding: 20px 22px; }
.invito h3 { font-size: 1.8rem; margin: 0 0 4px; }
.invito p { margin: 4px 0; opacity: .92; }
.invito .prezzo { font-family: var(--titoli); font-size: 1.35rem; background: rgba(255,255,255,.13);
                  border-radius: 8px; padding: 6px 12px; display: inline-block; margin: 8px 0 2px; }
.invito .bottone { margin-right: 8px; margin-top: 12px; }
.contatti { background: var(--blu); color: #fff; }
.contatti .riga { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 14px;
                  padding-top: 16px; padding-bottom: 16px; }
.contatti a { color: #fff; text-decoration: none; }
.contatti b { font-family: var(--titoli); font-size: 1.2rem; display: block; text-transform: uppercase;
              font-weight: 600; }

@media (max-width: 760px) {
  .eroe, .due, .autore, .griglia2 { grid-template-columns: 1fr; }
  .eroe h1 { font-size: 2.6rem; }
  .chi { flex-direction: column; text-align: center; }
  table { font-size: .85rem; }
  .scheda { padding: 16px; }
}

/* guida alle stampe: si salta alla sezione del gestionale e si torna su */
html { scroll-behavior: smooth; }
.sezione-guida { scroll-margin-top: 16px; margin-top: 34px; }
.torna { margin: 8px 0 0; font-size: .9rem; }
.torna a { color: var(--blu-medio); }

/* sul telefono motto e firma scendono sotto il marchio, su righe intere */
@media (max-width: 600px) {
  .marchio { flex-wrap: wrap; row-gap: 2px; }
  .marchio small { flex-basis: 100%; border-left: 0; padding-left: 0; }
}

/* presentazione: "Cosa fa per te" in alto a destra, "A chi serve" con due profili */
.schermo .titoletto { margin: 0 0 10px; font-size: 1.7rem; color: var(--blu); text-transform: uppercase;
                     line-height: 1.1; }
.schermo .titoletto small { display: block; font-size: 1.05rem; color: var(--marchio); margin-top: 2px; }
.schermo .spunte li { font-size: 1rem; padding-top: 5px; padding-bottom: 5px; }
.profilo { background: var(--blu-chiaro); border-left: 5px solid var(--blu-medio); border-radius: 10px;
           padding: 12px 16px; margin-bottom: 12px; line-height: 1.45; }
.profilo:last-child { margin-bottom: 0; border-left-color: var(--marchio); }
.profilo b { font-family: var(--titoli); font-size: 1.25rem; color: var(--blu); display: block;
             margin-bottom: 4px; }

/* sopra il titolo: le due etichette e che cosa e' Quadra, in una riga */
.cartellino { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pillola.novita { background: var(--marchio); text-transform: uppercase; letter-spacing: .04em; }
.che-cosa { font-family: var(--titoli); color: var(--blu-medio); font-size: 1.05rem; font-weight: 600; }

/* "Come attivarlo": due passi numerati dentro il riquadro blu */
.attiva { counter-reset: a; list-style: none; padding: 0; margin: 14px 0 6px; }
.attiva > li { counter-increment: a; position: relative; padding-left: 44px; margin-bottom: 14px; }
.attiva > li::before { content: counter(a); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
                       border-radius: 50%; background: var(--marchio); color: #fff; display: grid;
                       place-items: center; font-family: var(--titoli); font-size: 1.1rem; }
.attiva b { font-family: var(--titoli); font-size: 1.25rem; display: block; margin-bottom: 4px; }
.attiva .modo { display: block; margin: 4px 0; opacity: .95; line-height: 1.45; }
.attiva em { font-style: normal; font-weight: 700; }
.invito .info { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 10px; }
.attiva .dati { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px;
               margin: 2px 0 10px; padding: 8px 12px; background: rgba(255,255,255,.08); border-radius: 8px; }
.attiva .dati dt { opacity: .75; }
.attiva .dati dd { margin: 0; font-weight: 600; }