/* ------------------------------------------------------------------
   Consensi — foglio di stile
   Palette del brand noicompariamo 2026: blu #2AA8FF, navy #0B2238,
   giallo #FFDE59, carattere Manrope. Il logo usato e la variante bianca
   ufficiale, con trasparenza reale: sta su qualunque fondo senza riquadro.
   ------------------------------------------------------------------ */

@font-face {
    font-family: 'Manrope';
    src: url('font/manrope.woff2') format('woff2-variations'),
         url('font/manrope.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --blu: #2AA8FF;
    --blu-scuro: #1689DC;
    --giallo: #FFDE59;
    --navy: #0B2238;
    --grigio: #5B6B7A;
    --bordo: #E3EAF1;
    --sfondo: #F5F8FB;
    --errore: #C0392B;
    --errore-sfondo: #FDECEA;
    --ok: #1E8E4F;
    --ok-sfondo: #E9F7EF;

    --raggio: 14px;
    --ombra: 0 2px 14px rgba(11, 34, 56, .07);
    --larghezza: 34rem;
}

* { box-sizing: border-box; }

/* Una regola di classe batte per specificita il display:none nativo di [hidden]:
   senza questa riga gli elementi nascosti resterebbero visibili. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--navy);
    background: var(--sfondo);
}

/* ---------------------------- testata ---------------------------- */

.intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.1rem;
    padding-top: calc(.85rem + env(safe-area-inset-top));
    background: var(--blu);
    border-bottom: 3px solid var(--giallo);
}

.intestazione .logo {
    display: block;
    height: 26px;
    width: auto;
}

.intestazione .a-destra {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}

.intestazione form { margin: 0; }

/* Centrata quando non ci sono azioni a destra (pagine cliente) */
.intestazione.sola .logo { margin: 0 auto; }

/* Su telefono stretto il nome dell'agente esce dalla testata: si toglie,
   tanto e gia scritto nel riepilogo appena sotto. */
@media (max-width: 480px) {
    .intestazione .a-destra > span { display: none; }
    .intestazione { padding-left: .8rem; padding-right: .8rem; gap: .6rem; }
}

/* Icona per installare l'app: sta nella testata e compare solo quando il
   browser lo permette. */
.installa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: var(--navy);
    background: var(--giallo);
    border-radius: 10px;
}

.installa:hover { background: #F5CE33; }
.installa svg { display: block; }

/* Istruzioni per installare a mano: servono su iPhone, dove Safari non
   offre nessuna finestra di installazione. */
.istruzioni-installa {
    width: calc(100% - 2rem);
    max-width: 24rem;
    margin: .8rem auto 0;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1.5px solid var(--giallo);
    border-radius: 12px;
    box-shadow: var(--ombra);
}

.istruzioni-installa p { margin: 0 0 .6rem; font-size: .95rem; }

.istruzioni-installa ol {
    margin: 0 0 .9rem;
    padding-left: 1.2rem;
    font-size: .88rem;
    line-height: 1.6;
}

.istruzioni-installa svg { vertical-align: -2px; }

.istruzioni-installa .chiaro {
    width: 100%;
    background: var(--sfondo);
    border: 1px solid var(--bordo);
}

/* --------------------------- contenuto --------------------------- */

.contenuto {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 1rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

.scheda {
    width: 100%;
    max-width: var(--larghezza);
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.4rem;
    box-shadow: var(--ombra);
}

h1 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 .35rem;
}

.sottotitolo {
    margin: 0 0 1.35rem;
    color: var(--grigio);
    font-size: .92rem;
}

/* ----------------------------- campi ----------------------------- */

label {
    display: block;
    margin-bottom: 1.05rem;
    font-weight: 600;
    font-size: .9rem;
}

/* Un <input> senza attributo type vale comunque "text", e input[type="text"]
   non lo intercetterebbe: si elenca anche il caso senza attributo.
   Si evita la catena di :not(), che alzerebbe la specificita al punto da
   rendere difficile sovrascrivere questa regola altrove. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input:not([type]) {
    display: block;
    width: 100%;
    margin-top: .4rem;
    padding: .75rem .85rem;
    min-height: 48px;
    /* 16px esatti: sotto questa misura iOS zooma da solo all'apertura della tastiera */
    font-size: 16px;
    font-family: inherit;
    font-weight: 500;
    color: var(--navy);
    background: #fff;
    border: 1.5px solid var(--bordo);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: #9FAEBC; }

input:focus-visible {
    outline: none;
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(42, 168, 255, .22);
}

/* ------------------------ blocchi di consenso --------------------- */

.consenso {
    margin: 0 0 1.1rem;
    padding: .9rem 1rem 1rem;
    border: 1.5px solid var(--bordo);
    border-radius: 12px;
    background: var(--sfondo);
}

.consenso.in-errore { border-color: var(--errore); background: var(--errore-sfondo); }

.consenso legend {
    padding: 0 .4rem;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--grigio);
}

.testo-consenso {
    margin: 0 0 .85rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--navy);
}

.testo-consenso a { color: var(--blu-scuro); font-weight: 700; }

.scelte {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.scelta {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .7rem .8rem;
    min-height: 50px;
    font-size: .92rem;
    font-weight: 700;
    background: #fff;
    border: 1.5px solid var(--bordo);
    border-radius: 10px;
    cursor: pointer;
}

.scelta input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--blu);
}

.scelta:has(input:checked) { border-color: var(--blu); box-shadow: 0 0 0 2px rgba(42,168,255,.18); }
.scelta.nego:has(input:checked) { border-color: var(--grigio); box-shadow: 0 0 0 2px rgba(91,107,122,.15); }
.scelta:focus-within { border-color: var(--blu); }

@media (min-width: 560px) {
    .scelte { grid-template-columns: 1fr 1fr; }
}

label.spunta {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .85rem;
    padding: .8rem;
    font-weight: 400;
    font-size: .92rem;
    line-height: 1.45;
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    border-radius: 10px;
    cursor: pointer;
}

label.spunta input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: .1rem 0 0;
    accent-color: var(--blu);
}

label.spunta:focus-within {
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(42, 168, 255, .18);
}

/* ---------------------------- pulsanti --------------------------- */

button {
    width: 100%;
    padding: .9rem 1.1rem;
    min-height: 50px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--blu);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, transform .06s;
}

button:hover { background: var(--blu-scuro); }
button:active { transform: translateY(1px); }

button:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}

button:disabled {
    background: #A9C9E2;
    cursor: default;
    transform: none;
}

button.chiaro {
    width: auto;
    min-height: 38px;
    padding: .4rem .9rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    background: rgba(255, 255, 255, .92);
}

button.chiaro:hover { background: #fff; }

/* Azione principale della schermata agente: deve essere la prima cosa che
   l'occhio trova e la piu comoda da colpire col pollice. */
button.grande {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    max-width: var(--larghezza);
    min-height: 68px;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    box-shadow: 0 6px 18px rgba(42, 168, 255, .32);
}

button.grande svg { flex: 0 0 auto; }
button.grande:disabled { box-shadow: none; }

/* ----------------------------- stati ----------------------------- */

.errore {
    display: block;
    margin-top: .35rem;
    color: var(--errore);
    font-size: .82rem;
    font-weight: 700;
}

.avviso {
    margin: 0 0 1.1rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: var(--errore-sfondo);
    color: var(--errore);
    font-size: .88rem;
    font-weight: 700;
}

.stato {
    margin: 0;
    padding: .75rem .9rem;
    border-radius: 10px;
    background: var(--sfondo);
    color: var(--grigio);
    font-size: .92rem;
    font-weight: 700;
    text-align: center;
}

.stato.inviata { color: var(--ok); background: var(--ok-sfondo); }
.stato.errore  { color: var(--errore); background: var(--errore-sfondo); }

/* ------------------------------ QR ------------------------------- */

/* Contenitore del QR: ospita il velo che lo copre a codice consumato. */
.riquadro-qr { position: relative; }

#qr {
    display: flex;
    justify-content: center;
    padding: .85rem;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 12px;
}

#qr svg {
    display: block;
    width: min(74vw, 300px);
    height: auto;
    transition: filter .35s, opacity .35s;
}

/* Codice non piu utilizzabile: si sfoca sotto un velo, cosi nessuno prova a
   inquadrarlo di nuovo. */
.riquadro-qr.consumato #qr svg {
    filter: blur(7px) grayscale(.35);
    opacity: .45;
}

.velo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .55);
    text-align: center;
}

.velo .segno {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    font-size: 1.9rem;
    line-height: 1;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(11, 34, 56, .18);
}

.velo .didascalia {
    padding: .3rem .8rem;
    font-size: .92rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
}

.riquadro-qr.acquisito .velo .segno { background: var(--ok); }
.riquadro-qr.acquisito .velo .didascalia { color: var(--ok); }

.riquadro-qr.scaduto .velo .segno { background: var(--grigio); }
.riquadro-qr.scaduto .velo .didascalia { color: var(--grigio); }

/* Con un codice attivo a schermo il riepilogo si ritira e il pulsante
   passa sotto al QR: in cima deve esserci quello che il cliente deve vedere. */
.contenuto.con-sessione .vigilanza,
.contenuto.con-sessione .cronologia { display: none; }

/* Con un codice a schermo comanda il QR; il pulsante scende sotto e si
   fa piu discreto, perche l'azione del momento e farlo inquadrare. */
.contenuto.con-sessione #pannello { order: 1; }

.contenuto.con-sessione #nuova {
    order: 2;
    min-height: 52px;
    font-size: 1rem;
    box-shadow: none;
}

/* Il logo della testata riporta alla schermata iniziale dell'agente. */
.logo-collegamento { display: block; line-height: 0; }
.logo-collegamento:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* -------------------------- cronologia --------------------------- */

.cronologia { max-width: var(--larghezza); }

.cronologia h2 {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.cronologia .sottotitolo { margin-bottom: 1rem; }
.cronologia .vuoto { margin: 0; color: var(--grigio); font-size: .9rem; }

.elenco-cronologia {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elenco-cronologia .voce {
    padding: .65rem 0 .65rem .8rem;
    border-left: 3px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
}

.elenco-cronologia .voce:last-child { border-bottom: 0; padding-bottom: 0; }

.elenco-cronologia .voce.acquisito { border-left-color: var(--ok); }
.elenco-cronologia .voce.errore    { border-left-color: var(--errore); }
.elenco-cronologia .voce.scaduto   { border-left-color: var(--bordo); }
.elenco-cronologia .voce.corso     { border-left-color: var(--blu); }

.riga-principale {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .8rem;
}

.riga-principale .quando { font-size: .86rem; color: var(--grigio); }
.riga-principale .quando strong { color: var(--navy); font-variant-numeric: tabular-nums; }

.riga-principale .esito { font-size: .78rem; font-weight: 800; text-align: right; }

.voce.acquisito .esito { color: var(--ok); }
.voce.errore .esito    { color: var(--errore); }
.voce.scaduto .esito,
.voce.corso .esito     { color: var(--grigio); }
.voce.corso .esito     { color: var(--blu-scuro); }

.riga-dettagli {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin-top: .2rem;
    font-size: .82rem;
    font-weight: 600;
}

.riga-dettagli em { color: var(--grigio); font-weight: 400; }
.riga-dettagli .mono { color: var(--grigio); font-weight: 500; }

/* ------------- pannello di vigilanza della schermata agente ------- */

.vigilanza {
    max-width: var(--larghezza);
    padding: 1.1rem 1.2rem;
}

.titolo-vigilanza {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--grigio);
}

.titolo-vigilanza .pallino {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E0342C;
    box-shadow: 0 0 0 3px rgba(224, 52, 44, .18);
}

.dati-vigilanza {
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem .9rem;
    margin: 0 0 1rem;
}

.dati-vigilanza > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--bordo);
}

.dati-vigilanza dt {
    color: var(--grigio);
    font-size: .84rem;
    font-weight: 600;
}

.dati-vigilanza dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    text-align: right;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
}

.conteggi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: .9rem;
}

.conteggi > div {
    padding: .6rem .3rem;
    text-align: center;
    background: var(--sfondo);
    border-radius: 10px;
}

.conteggi strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.conteggi span {
    display: block;
    margin-top: .15rem;
    color: var(--grigio);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.25;
}

.nota-vigilanza {
    margin: .55rem 0 0;
    color: var(--grigio);
    font-size: .78rem;
    line-height: 1.45;
}

@media (min-width: 640px) {
    .dati-vigilanza { grid-template-columns: 1fr 1fr; }
    .dati-vigilanza > div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}

/* ------------------- box del link, copia al clic ------------------ */

.copia-link {
    display: block;
    width: 100%;
    margin: .9rem 0 0;
    padding: .75rem .9rem;
    min-height: 0;
    text-align: left;
    font-family: inherit;
    font-weight: 400;
    color: var(--navy);
    background: var(--sfondo);
    border: 1.5px dashed var(--bordo);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.copia-link:hover {
    background: #fff;
    border-color: var(--blu);
}

.copia-link .etichetta {
    display: block;
    margin-bottom: .2rem;
    color: var(--grigio);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.copia-link .indirizzo {
    display: block;
    /* un URL lungo deve andare a capo, non allargare la scheda */
    overflow-wrap: anywhere;
    word-break: break-all;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
}

.copia-link .conferma {
    display: block;
    margin-top: .35rem;
    color: var(--ok);
    font-size: .8rem;
    font-weight: 700;
}

/* Link non piu valido: si smorza e smette di rispondere al clic. */
.copia-link.spento {
    opacity: .5;
    cursor: default;
    border-style: solid;
}

.copia-link.spento:hover {
    background: var(--sfondo);
    border-color: var(--bordo);
}

.copia-link.copiato {
    background: var(--ok-sfondo);
    border-color: var(--ok);
    border-style: solid;
}

/* Su telefono il suggerimento "tocca per copiarlo" starebbe stretto */
@media (max-width: 400px) {
    .copia-link .suggerimento { display: none; }
}

/* ------------------- invio del link su WhatsApp ------------------ */

.invio-whatsapp {
    margin-top: .7rem;
    padding: .75rem .9rem;
    background: var(--sfondo);
    border: 1.5px solid var(--bordo);
    border-radius: 10px;
}

.invio-whatsapp .etichetta {
    display: block;
    margin-bottom: .45rem;
    color: var(--grigio);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.riga-numero {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* I tre elementi della riga hanno altezza imposta invece che dedotta dal
   contenuto: un <input> non si allunga come gli altri e resterebbe piu basso. */
.riga-numero > * {
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.riga-numero .prefisso {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-left: .7rem;
    padding-right: .7rem;
    font-size: .95rem;
    font-weight: 800;
    color: var(--grigio);
    background: #fff;
    border: 1.5px solid var(--bordo);
    border-radius: 10px;
}

.riga-numero input {
    flex: 1 1 auto;
    /* annulla il margine dei campi dentro le label del modulo cliente */
    margin-top: 0;
    min-width: 0;
    line-height: normal;
}

.riga-numero .whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: #25D366;
}

.riga-numero .whatsapp:hover { background: #1FAE53; }
.riga-numero .whatsapp:disabled { background: #A9C9E2; }

.invio-whatsapp.spento { opacity: .5; }
.invio-whatsapp.spento input { pointer-events: none; }

/* Su schermi stretti il pulsante va sotto, cosi il numero resta leggibile */
@media (max-width: 420px) {
    .riga-numero { flex-wrap: wrap; row-gap: .55rem; }
    .riga-numero input { flex: 1 1 60%; }
    .riga-numero .whatsapp { flex: 1 1 100%; }
}

/* A codice spento l'istruzione e il countdown non hanno piu senso. */
#pannello.chiuso .istruzione,
#pannello.chiuso .riga-scadenza { display: none; }
#pannello.chiuso .invio-whatsapp { display: none; }

.riga-scadenza {
    margin: .9rem 0;
    text-align: center;
    color: var(--grigio);
    font-size: .9rem;
}

#countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--navy);
}

.istruzione {
    margin: .9rem 0 0;
    text-align: center;
    font-weight: 600;
}

/* ----------------------------- esito ----------------------------- */

.esito { text-align: center; }

.esito .simbolo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 1rem;
    font-size: 2rem;
    line-height: 1;
    border-radius: 50%;
    background: var(--ok-sfondo);
    color: var(--ok);
}

.esito.negativo .simbolo { background: var(--errore-sfondo); color: var(--errore); }
.esito p { margin: 0; color: var(--grigio); }

/* ------------------------------ piede ----------------------------- */

/* Collegamento all'informativa: deve essere riconoscibile come tale,
   anche dentro al piede in grigio. */
.piede .collegamento-informativa {
    display: inline-block;
    margin-bottom: .2rem;
    color: var(--navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.piede .collegamento-informativa:hover { color: var(--blu-scuro); }

label.spunta a {
    color: var(--blu-scuro);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

label.spunta a:hover { color: var(--navy); }

.piede {
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    text-align: center;
    color: var(--grigio);
    font-size: .74rem;
    line-height: 1.5;
}

/* --------------------------- responsive --------------------------- */

@media (min-width: 640px) {
    .intestazione { padding: 1rem 1.6rem; }
    .intestazione .logo { height: 30px; }
    .scheda { padding: 2rem; }
    h1 { font-size: 1.5rem; }
    .contenuto { padding: 2rem 1.5rem; }
    #qr svg { width: 320px; }
}

/* Telefono ruotato: la testata non deve mangiarsi lo schermo */
@media (max-height: 460px) and (orientation: landscape) {
    .intestazione { padding: .5rem 1rem; }
    .intestazione .logo { height: 22px; }
    .contenuto { justify-content: flex-start; padding: 1rem; }
    #qr svg { width: min(38vw, 220px); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}