/* 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}

/* 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}
.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}