/* Palette SGR (brand book) */
:root{
  --verde:#00A97A; --ciano:#009FE3; --blu:#00205B;
  --ink:#292C33; --mute:#3E4454; --rosso:#E73932;
  --rosa:#FBD2CE; --verde-chiaro:#C0EAE2; --bordo:#D9DEE3; --sfondo:#F4F7F9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sfondo);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.45}

/* Testata */
.testata{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:linear-gradient(90deg,var(--verde),var(--ciano));color:#fff}
.marchio{font-weight:700;font-size:20px;letter-spacing:.5px}
.marchio span{font-weight:400;font-size:12px;opacity:.9;display:block;letter-spacing:1px}
.testata nav{display:flex;gap:14px;flex-wrap:wrap}
.testata a{color:#fff;text-decoration:none;font-size:14px;font-weight:600;
  padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.15)}
.testata a:hover{background:rgba(255,255,255,.28)}

main{max-width:900px;margin:0 auto;padding:16px}
footer{max-width:900px;margin:0 auto;padding:8px 16px 28px;color:var(--mute);font-size:12px;font-style:italic}

/* Schede */
.scheda{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:18px;margin-bottom:16px}
.scheda.stretta{max-width:420px;margin:32px auto}
h1{font-size:24px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 12px;color:var(--verde)}
.occhiello{color:var(--verde);font-weight:600;margin:0;font-size:14px}
.indirizzo{color:var(--mute);margin:2px 0 14px;font-size:14px}

/* Numero eroe */
.eroe{display:flex;flex-wrap:wrap;gap:12px}
.eroe > div{flex:1 1 220px;border:2px solid var(--verde);border-radius:10px;padding:12px}
.eroe .etichetta{display:block;font-size:13px;color:var(--mute)}
.eroe .numero{display:block;font-size:28px;font-weight:700;color:var(--verde);line-height:1.2}

/* Colonne */
.colonne{display:flex;flex-wrap:wrap;gap:16px}
.colonne > .scheda{flex:1 1 320px}

/* Bolletta */
.riquadro{border-radius:10px;padding:12px 14px;margin-bottom:10px}
.riquadro span{display:block;font-size:13px;color:var(--mute)}
.riquadro strong{font-size:24px}
.riquadro.rosso{background:var(--rosa)} .riquadro.rosso strong{color:var(--rosso)}
.riquadro.verde{background:var(--verde-chiaro)} .riquadro.verde strong{color:var(--verde)}
.bollo{display:inline-block;background:var(--ciano);color:#fff;font-weight:700;
  padding:6px 14px;border-radius:20px;margin:0;font-size:14px}
.tetto{width:100%;border-radius:10px;border:1px solid var(--bordo);display:block}

/* Valori impianto */
.valori{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:0}
.valori li{flex:1 1 150px;border-left:3px solid var(--bordo);padding-left:12px}
.valori b{display:block;font-size:20px} .valori span{font-size:13px;color:var(--mute)}

/* Tabella */
.tabella{width:100%;border-collapse:collapse}
.tabella td{padding:8px 0;border-bottom:1px solid var(--bordo)}
.tabella td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.tabella tr.forte td{color:var(--verde);font-size:18px;font-weight:700}
.ambiente{margin:12px 0 0;color:var(--mute);font-size:13px}

/* Form */
label{display:block;margin-bottom:14px;font-size:14px;font-weight:600}
input{width:100%;margin-top:6px;padding:12px;font-size:16px;
  border:1px solid var(--bordo);border-radius:8px;background:#fff;color:var(--ink)}
select{width:100%;margin-top:6px;padding:12px;font-size:16px;
  border:1px solid var(--bordo);border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--ciano);border-color:var(--ciano)}
/* la casella di spunta non si prende tutta la riga come gli altri campi */
input[type=checkbox]{width:auto;margin-top:0}
small{display:block;font-weight:400;color:var(--mute);margin-top:4px}
.due{display:flex;gap:14px;flex-wrap:wrap} .due label{flex:1 1 150px}
/* opzione filtrata da gamme.js: hidden da solo non basta su alcuni browser mobili */
option[hidden]{display:none}
/* l'attributo hidden deve vincere sulle regole di layout scritte qui sopra: 'label' e'
   una regola d'autore e batte il display:none del browser, quindi un <label hidden>
   resterebbe visibile (e' successo con il menu della marca dell'accumulo) */
[hidden]{display:none!important}
button{width:100%;padding:14px;font-size:17px;font-weight:700;color:#fff;
  background:var(--verde);border:0;border-radius:8px;cursor:pointer}
button:hover{background:#008f68}
fieldset{border:1px solid var(--bordo);border-radius:10px;margin:0 0 16px;padding:12px 14px}
legend{font-weight:700;color:var(--verde);padding:0 6px}
.campo.in-errore input{border-color:var(--rosso);background:#fff5f5}
.campo em{font-weight:400;color:#b07d00}

/* Pannello parametri: un parametro diverso dal valore ufficiale si deve VEDERE, anche
   scorrendo un listino di duecento campi, e il valore ufficiale si deve poter leggere
   senza andare a cercare il file. Il giallo non e' un errore - una taratura del
   commerciale e' una cosa voluta - ma non e' nemmeno la normalita'. */
.campo.modificato input{border-color:#e0a800;background:#fffdf3}
.campo .ufficiale{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-weight:400;color:#8a6d00;font-size:13px;margin-top:4px}
.campo .ufficiale button{width:auto;padding:6px 12px;font-size:13px}
.differenze{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.differenze th,.differenze td{text-align:left;padding:8px 10px;
  border-bottom:1px solid var(--bordo);vertical-align:middle}
.differenze th{color:var(--mute);font-size:13px;font-weight:600}
.differenze code{font-size:12px;word-break:break-all}
.differenze button{width:auto;padding:8px 12px;font-size:13px}
/* Il ripristino totale e' l'unico comando distruttivo del pannello: sta in un riquadro
   suo, con la spunta di conferma SOPRA il pulsante e non sotto, cosi' non ci si arriva
   senza esserci passati davanti. */
.azzera{border:1px solid #f5b7b1;border-radius:10px;padding:14px;background:#fffafa}
.azzera .conferma{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;
  font-weight:600}
.azzera .conferma input{width:auto;margin-top:2px}
.azzera button{background:var(--rosso)}
.azzera button:hover{background:#a93226}

/* Azioni e messaggi */
.azioni{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.azioni form{flex:1 1 220px}
.secondario{display:inline-block;padding:14px 18px;border-radius:8px;text-decoration:none;
  border:1px solid var(--bordo);background:#fff;color:var(--ink);font-weight:600;text-align:center}
.errore{background:#fdecea;border:1px solid #f5b7b1;color:#a93226;padding:12px;border-radius:8px}
.ok{background:#e7f6ee;border:1px solid #9bd8ba;color:#0b6b3f;padding:12px;border-radius:8px}
.nota{color:var(--mute);font-size:13px}
.avvisi{border-left:4px solid var(--ciano)}
.avvisi ul{margin:0;padding-left:20px;color:var(--mute);font-size:14px}
/* Suggerimento sulla pompa di calore: sta SOTTO il risultato e non lo interrompe,
   quindi e' una scheda normale con un filetto azzurro - nessun rosso, nessun allarme:
   e' un'opportunita' commerciale, non un problema da risolvere. */
.suggerimento{border-left:4px solid #6fb9dd;background:#f7fbfe}
.suggerimento p{margin:0 0 12px;color:var(--mute);font-size:14px}
.suggerimento p:last-child{margin-bottom:0}

@media (max-width:600px){
  main{padding:12px} .scheda{padding:14px} h1{font-size:21px}
  .eroe .numero{font-size:24px}
}

/* Tendina dei suggerimenti indirizzo (autocompletamento) */
.con-tendina{position:relative}
.suggerimenti{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:0;
  list-style:none;background:#fff;border:1px solid var(--bordo);border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);max-height:250px;overflow-y:auto}
.suggerimenti li{padding:12px 14px;font-size:15px;font-weight:400;cursor:pointer;
  border-bottom:1px solid #eef2f4}
.suggerimenti li:last-child{border-bottom:0}
.suggerimenti li.attivo,.suggerimenti li:hover{background:#eaf6fc}

/* Correzione manuale della posizione del tetto */
.posizione-corretta{margin:8px 0 0;padding:8px 10px;border-radius:6px;font-size:13px;
  background:var(--verde-chiaro);color:#00694c;font-weight:600}
.correzione{margin-top:12px;border:1px solid var(--bordo);border-radius:8px;padding:10px 12px}
.correzione summary{cursor:pointer;font-weight:600;color:var(--ciano);font-size:14px}
.correzione summary:hover{text-decoration:underline}
.correzione form{margin-top:12px}
.correzione .aiuto{font-size:13px;color:var(--mute);margin:0 0 12px;line-height:1.5}

/* Costo reale del cliente e potenza scelta dall'agente */
.facolt{font-weight:400;font-size:12px;color:var(--mute);background:#eef2f4;
  padding:2px 8px;border-radius:10px;margin-left:6px}
.fonte-prezzo{margin:10px 0 0;padding:8px 10px;border-radius:6px;font-size:13px;
  background:#eef2f4;color:var(--mute)}
.fonte-prezzo.reale{background:var(--verde-chiaro);color:#00694c;font-weight:600}
.confronto .tabella th{text-align:right;font-size:12px;color:var(--mute);padding:6px 0;
  border-bottom:1px solid var(--bordo)}
.confronto .tabella th:first-child{text-align:left}
.confronto .tabella td{text-align:right}
.confronto .tabella td:first-child{text-align:left;color:var(--mute)}
.confronto .tabella td.scelto{color:var(--verde);font-weight:700}
.correzione select{width:100%;margin-top:6px;padding:12px;font-size:16px;
  border:1px solid var(--bordo);border-radius:8px;background:#fff}

/* Mini-mappa per la correzione della posizione + didascalia dei pannelli disegnati */
.mappa-blocco{margin:12px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--bordo)}
.mappa{height:320px;border-radius:10px;overflow:hidden;background:#e9edf0;
  border:1px solid var(--bordo)}
.mappa-blocco .aiuto{margin:10px 0}
.mappa-blocco b{color:var(--ink)}
.didascalia{margin:6px 0 0;font-size:12px;color:var(--mute);line-height:1.45}
@media (max-width:700px){.mappa{height:260px}}

/* Opzioni commerciali: potenza tagliata, prezzo nel PDF */
.avviso-potenza{margin:0 0 12px}
.spunta{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;
  margin-bottom:12px;cursor:pointer}
.spunta input{width:20px;height:20px;margin:0;accent-color:var(--verde)}
/* Accessori del documento PdC. Le voci non disponibili restano visibili ma spente:
   l'agente deve sapere che esistono, e sapere che oggi non si possono vendere. */
.accessori{border:1px solid var(--bordo);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.accessori legend{font-size:13px;font-weight:700;padding:0 6px}
.accessori .voce + .voce{border-top:1px solid #eef1f3}
.accessori .spunta{font-weight:500;padding:7px 0;min-height:44px}
.accessori .spunta .nome{flex:1 1 auto;min-width:0}
.accessori .spunta b{margin-left:auto;font-weight:700;white-space:nowrap}
.accessori .spunta b .per{font-weight:500;font-size:12px;color:var(--mute)}
.accessori .spunta i{margin-left:auto;font-style:normal;font-size:12px;color:var(--mute)}
.accessori .spento{color:var(--mute);cursor:not-allowed}
/* Il campo quantita' si apre sotto la sua voce, rientrato quanto la casella: con
   cinque accessori a quantita' aperti l'elenco si allunga, e su 390 px deve restare
   leggibile senza che il numero vada a capo o finisca fuori. */
.accessori .qta{padding:0 0 10px 30px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.accessori .qta label{display:flex;align-items:center;gap:8px;margin:0;
  font-size:13px;font-weight:600}
/* Il conto del Conto Termico, sotto lo sconto: tre righe e, quando serve, l'avviso che
   il tetto sulla spesa ha tagliato l'incentivo di listino. L'avviso e' giallo e non
   rosso: non e' un errore dell'agente, e' un'occasione di aggiungere un accessorio. */
.conto-termico{border:1px solid var(--bordo);border-radius:10px;padding:12px 14px;
  margin:0 0 14px;background:#fff}
.conto-termico h3{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--mute);
  text-transform:uppercase;letter-spacing:.5px}
.conto-termico .riga{display:flex;gap:12px;align-items:baseline;margin:0 0 6px;
  font-size:14px}
.conto-termico .riga span{flex:1 1 auto;min-width:0;color:var(--mute)}
.conto-termico .riga b{margin-left:auto;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.conto-termico .riga.forte{border-top:1px solid var(--bordo);padding-top:8px;
  margin-top:8px;font-size:16px}
.conto-termico .riga.forte span{color:var(--ink);font-weight:600}
.conto-termico .riga.forte b{color:var(--blu);font-weight:700}
.conto-termico .limite{margin:10px 0 0;padding:10px 12px;border-radius:8px;
  background:#FFF6D9;border:1px solid #F0D98A;font-size:13px;line-height:1.4}
.accessori .qta input{width:84px;min-height:44px;padding:8px 10px;margin:0;
  font-size:16px;text-align:center}
.accessori .qta small{flex:1 1 100%;color:var(--mute);font-size:12px;line-height:1.35}
.azioni form{flex:1}

/* Pagina pompa di calore: elenco delle famiglie, proponibili e non */
.famiglie{list-style:none;padding:0;margin:0}
.famiglie li{padding:10px 12px;border-radius:8px;margin-bottom:8px;font-size:14px;
  border:1px solid var(--bordo)}
.famiglie li span{display:block;font-weight:400;color:var(--mute);margin-top:2px}
.famiglie li.si{background:var(--verde-chiaro);border-color:#9bd8ba}
.famiglie li.si b{color:#00694c}
.famiglie li.no{background:#f6f7f9;color:var(--mute)}
.famiglie li.no b{text-decoration:line-through}

/* Barra dei passi del preventivo: fissa in fondo, a portata di pollice.
   Le misure sono pensate per un telefono stretto (320 px): 48 px di altezza minima per
   il tocco, etichette a 13 px che si leggono senza zoom, e il corpo con un po' di
   spazio sotto perche' la barra non copra l'ultimo bottone della pagina. */
.passi{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:6px;
  padding:8px;background:#fff;border-top:1px solid var(--bordo);
  box-shadow:0 -2px 12px rgba(0,0,0,.10)}
.passi .passo{flex:1 1 0;min-width:0;min-height:48px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;padding:6px 2px;border-radius:8px;
  background:#eef2f4;color:var(--mute);font-size:13px;font-weight:600;line-height:1.1;
  text-decoration:none;text-align:center;white-space:nowrap;overflow:hidden}
.passi .passo .n{font-size:11px;font-weight:700;opacity:.75}
.passi .passo.attivo{background:var(--verde);color:#fff}
.passi .passo.attivo .n{opacity:.9}
.passi .passo.spento{opacity:.45;pointer-events:none}
.passi .passo.indietro{flex:0 0 46px;font-size:26px;font-weight:700;padding:0;
  background:#fff;border:1px solid var(--bordo);color:var(--ciano)}
body.con-passi{padding-bottom:76px}
body.con-passi footer{padding-bottom:8px}

/* Avviso informativo (la PdC ricalcolata, la posizione azzerata): non e' un errore,
   quindi non e' rosso. */
.avviso-info{background:#eaf6fc;border:1px solid #b6e0f5;color:#0b5876;
  padding:12px;border-radius:8px;margin:0 0 14px;font-size:14px}

/* --- Utenti e password --- */
/* La tabella utenti su 390 px non ci sta: invece di rimpicciolire il testo finche' non
   si legge piu', scorre in orizzontale dentro il suo riquadro. La pagina no. */
.tabella-scorrevole{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px}
.tabella.utenti{min-width:520px;font-size:14px}
.tabella.utenti th{text-align:left;font-size:12px;color:var(--mute);font-weight:600;
  padding:6px 10px 6px 0;border-bottom:1px solid var(--bordo)}
.tabella.utenti td{padding:10px 10px 10px 0;border-bottom:1px solid #eef1f3;
  vertical-align:middle}
.tabella.utenti .azione{padding-right:0}
.tabella.utenti .azione button{padding:10px 14px;font-size:13px;min-height:44px;
  white-space:nowrap}
.stato{font-size:12px;font-weight:600;white-space:nowrap}
.stato.attivo{color:var(--verde)}
.stato.attesa{color:#8a6100}
.stato.spento{color:var(--mute)}
/* La password temporanea si legge al telefono mentre la si detta: grande, spaziata,
   e in un carattere in cui la elle non si confonde con la i. */
.password-nuova{border:2px solid var(--verde);background:#f4fbf8;margin:0 0 16px}
.password-nuova .chiave{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:28px;font-weight:700;letter-spacing:2px;color:var(--ink);
  margin:6px 0 12px;word-break:break-all;user-select:all}

/* --- Schermata di verifica del risparmio PdC (solo admin) --- */
/* La colonna del conto e' in monospaziato perche' serve a RIFARE l'operazione a mano:
   le cifre incolonnate si confrontano, quelle proporzionali no. */
.tabella.passaggi td, .tabella.scenari td, .tabella.parametri-usati td{
  padding:8px 10px 8px 0;border-bottom:1px solid #eef1f3;text-align:left;
  font-weight:400;white-space:normal}
.tabella.passaggi th, .tabella.scenari th, .tabella.parametri-usati th{
  text-align:left;font-size:12px;color:var(--mute);font-weight:600;
  padding:6px 10px 6px 0;border-bottom:1px solid var(--bordo)}
.tabella.passaggi td:first-child{width:24px;color:var(--mute);font-weight:700}
.tabella.passaggi .conto{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;color:var(--mute)}
.tabella.passaggi td:last-child, .tabella.scenari td:not(:first-child){
  text-align:right;white-space:nowrap}
.tabella.scenari{min-width:520px}
.tabella.parametri-usati code{font-size:12px;color:var(--mute);word-break:break-all}
.modello-applicato{background:#f4fbf8;border-left:4px solid var(--verde);
  padding:10px 14px;border-radius:0 8px 8px 0;font-size:14px;margin:0 0 14px}

/* --- Pagina di controllo della mappa dei campi del modulo (solo admin) --- */
/* Sono tabelle di riferimento, non numeri da leggere al volo: su 320 px scorrono in
   orizzontale dentro il loro riquadro, come quella degli utenti. La pagina no - la barra
   in fondo deve restare dov'e'. */
.tabella.mappa-campi{min-width:520px;font-size:13px}
.tabella.mappa-campi th{text-align:left;font-size:12px;color:var(--mute);font-weight:600;
  padding:6px 10px 6px 0;border-bottom:1px solid var(--bordo)}
.tabella.mappa-campi td{padding:7px 10px 7px 0;border-bottom:1px solid #eef1f3;
  text-align:left;font-weight:400;white-space:normal;vertical-align:top}
.tabella.mappa-campi code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px}
.legenda{list-style:none;margin:0;padding:0}
.legenda li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px}
.pastiglia{display:inline-block;width:16px;height:16px;border-radius:4px;flex:none}

/* --- Dati per il contratto --- */
/* Le scelte a due vie (uguale/diverso, bonifico/finanziamento, Z.T.L. si'/no) sono
   pulsanti larghi, non pallini: si toccano col pollice mentre si parla col cliente. */
.scelta-doppia{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.scelta{flex:1 1 150px;display:flex;align-items:center;gap:10px;margin:0;padding:12px;
  min-height:48px;border:1px solid var(--bordo);border-radius:10px;background:#fff;
  font-size:14px;font-weight:600;cursor:pointer}
.scelta input[type=radio]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--verde)}
.scelta:has(input:checked){border-color:var(--verde);background:#f4fbf8;color:var(--verde)}
.scelta-doppia.in-errore .scelta{border-color:var(--rosso)}
/* La scelta dell'agevolazione: e' l'unica risposta del form che cambia il contratto e
   non un campo del contratto, quindi si vede che e' un'altra cosa. Le due voci vanno
   a capo l'una sotto l'altra perche' ognuna porta la sua spiegazione. */
.scheda.scelta-forte{border-left:4px solid var(--verde)}
.scelta-forte .scelta-doppia{flex-direction:column}
.scelta-forte .scelta{align-items:flex-start;font-weight:500;line-height:1.4}
.scelta-forte .scelta b{font-weight:700}
.scelta-forte .scelta input[type=radio]{margin-top:2px}
/* i campi che compaiono solo quando servono: nascosti da contratto.js, visibili se il
   JavaScript non parte - meglio un form piu' lungo che un form che non si puo' compilare */
.manuale.chiuso{display:none}
.tris{display:flex;gap:10px;flex-wrap:wrap} .tris label{flex:1 1 90px}
.coppia{display:flex;gap:12px;flex-wrap:wrap} .coppia label{flex:1 1 140px}
.campo .aiuto{font-weight:400;color:var(--mute);font-size:13px;line-height:1.45}

/* --- Replica a video della pagina 2 del modulo --- */
/* La replica ha una larghezza sua, piu' grande dello schermo di un telefono: rimpicciolita
   a 390 px le caselle del modulo diventano quadratini da 5 px e col pollice non si
   prendono. Si scorre dentro il suo riquadro e si ingrandisce con i pulsanti o con due
   dita; la pagina intorno resta ferma. */
.replica-comandi{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.replica-comandi .secondario{min-width:52px;min-height:44px;font-size:20px;line-height:1;
  padding:10px 14px}
.replica-misura{font-weight:700;color:var(--mute);min-width:52px;text-align:center}
.replica-scorrevole{overflow:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--bordo);border-radius:10px;background:#fff}
.replica{position:relative;width:980px;--scala:1.646}
.replica img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}
/* l'area di tocco: invisibile, grande quanto la mappa consente senza invadere la vicina */
.replica .tocco{position:absolute;margin:0;display:block;cursor:pointer;
  background:transparent;-webkit-tap-highlight-color:rgba(0,169,122,.25)}
.replica .tocco input{position:absolute;width:100%;height:100%;margin:0;opacity:0;
  cursor:pointer}
.replica .tocco:focus-within{outline:2px solid var(--ciano);outline-offset:0;border-radius:4px}
/* il segno della spunta: dentro la casella stampata, non dentro l'area di tocco */
.replica .segno{position:absolute;pointer-events:none;display:none;
  border:calc(var(--scala) * 1.1px) solid var(--verde);border-radius:2px;
  background:rgba(0,169,122,.16);box-sizing:border-box}
.replica .segno.acceso{display:block}
.replica .tocco:has(input:checked) + .segno{display:block}
/* i riquadri da riempire: stanno dove sta il riquadro stampato sul modulo */
.replica .riquadro{position:absolute;margin:0;padding:0 calc(var(--scala) * 1px);
  border:0;border-bottom:calc(var(--scala) * 1.2px) solid var(--ciano);border-radius:0;
  background:rgba(0,159,227,.07);color:var(--ink);
  font-size:calc(var(--scala) * 8px);line-height:1}
.replica .riquadro:focus{outline:2px solid var(--ciano);background:#fff}
.replica .riquadro[readonly]{background:rgba(0,0,0,.05);border-bottom-color:var(--bordo);
  color:var(--mute)}
.replica .riquadro-centro{text-align:center}
.replica .riquadro-destra{text-align:right}