/* =========================================================================
   Area Clienti REI — stile app (PWA)
   Identità: navy #0B1733 + verde #22ca01. Mobile-first.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  /* --- Palette Facile.Energy (ricavata dal logo e dal sito) ---------------
     verde header #23A279 · verde scuro #197C5D · lime #CFE200
     navy testi #0B1933 · grigio #767676 · logo #06A479
     ---------------------------------------------------------------------- */
  --navy:#0B1933; --navy-2:#16294F;
  --green:#23A279; --green-dk:#197C5D;
  --yellow:#CFE200;
  --bg:#EEF3F1; --card:#fff;
  --ink:#0B1933; --muted:#767676; --line:#E4EBE8;
  --ok:#15803d; --warn:#b45309; --danger:#b91c1c;
  --shadow:0 10px 30px rgba(11,25,51,.10);
  --maxw:480px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Manrope',system-ui,sans-serif;background:#d9dfe7;color:var(--ink);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain;
}
/* indicatore "tira giù per aggiornare" */
.ptr{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-50px);width:40px;height:40px;border-radius:50%;
  background:#fff;box-shadow:0 6px 18px rgba(11,23,51,.22);display:flex;align-items:center;justify-content:center;z-index:65;opacity:0;pointer-events:none}
.ptr.snap{transition:transform .25s ease, opacity .2s ease}
.ptr__spin{width:20px;height:20px;border-radius:50%;border:2.6px solid #d7deeb;border-top-color:var(--green-dk)}
.ptr.ready .ptr__spin{border-top-color:var(--green)}
.ptr.spin .ptr__spin{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* popup di notifica (toast) */
.rei-toast{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-160%);
  width:calc(100% - 28px);max-width:calc(var(--maxw) - 28px);z-index:90;cursor:pointer;
  display:flex;align-items:center;gap:11px;background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;
  box-shadow:0 14px 34px rgba(11,23,51,.38);font-size:14px;font-weight:600;line-height:1.35;
  margin-top:calc(env(safe-area-inset-top,0px) + 10px);transition:transform .34s cubic-bezier(.2,.85,.25,1)}
.rei-toast.show{transform:translateX(-50%) translateY(0)}
.rei-toast__ic{font-size:19px;flex:0 0 auto;line-height:1}
.rei-toast__msg{flex:1;min-width:0}
/* contenitore app: a tutto schermo su mobile, colonna centrata su desktop */
.app{
  position:relative;max-width:var(--maxw);min-height:100dvh;margin:0 auto;background:var(--bg);
  box-shadow:0 0 60px rgba(11,23,51,.18);overflow:hidden;
}
a{color:inherit}

/* ---- viste ---- */
.view{display:none;min-height:100dvh;padding:
  calc(env(safe-area-inset-top,0px) + 14px) 18px calc(92px + env(safe-area-inset-bottom,0px));
  animation:fade .26s ease}
.view.is-active{display:block}
#v-login.is-active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- bottoni ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:52px;border:none;
  border-radius:14px;font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer;
  transition:transform .12s, box-shadow .2s;text-decoration:none}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn--green{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff;box-shadow:0 8px 20px rgba(34,202,1,.35)}
.btn--ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn--navy{background:var(--navy);color:#fff}

/* ===================== LOGIN ===================== */
#v-login{flex-direction:column;justify-content:center;
  background:linear-gradient(160deg,var(--navy) 0%, var(--navy-2) 60%, #1c2c5c 100%);padding:30px}
.logo{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:38px}
.logo .mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--green),#0db000);
  display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.logo .mark svg{width:23px;height:23px}
.logo .txt{color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:16px;line-height:1.05}
.logo .txt b{color:var(--green)}
.login-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px 20px}
.login-card h2{color:#fff;font-family:'Sora',sans-serif;font-size:22px;margin-bottom:4px}
.login-card .sub{color:#aab6d4;font-size:13px;margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;color:#c4cee6;font-size:12px;font-weight:600;margin-bottom:6px}
.field input{width:100%;height:48px;border-radius:13px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);color:#fff;padding:0 15px;font-size:15px;font-family:inherit}
.field input::placeholder{color:#8190b3}
.field input:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.12)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:48px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:8px;cursor:pointer;color:#8190b3;display:flex;align-items:center;border-radius:8px}
.pw-eye:active{color:#fff}
.forgot{text-align:right;margin:-4px 0 16px}
.forgot a{color:#9fb0d6;font-size:12.5px;text-decoration:none}
.login-error{color:#ffb4b4;font-size:13px;margin:0 0 12px;min-height:0}
.divider{display:flex;align-items:center;gap:12px;color:#7e8db0;font-size:12px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.spid{display:flex;gap:10px}
.spid a{flex:1;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;gap:8px;color:#dbe3f5;font-size:13px;font-weight:600;text-decoration:none}
.login-foot{color:#7e8db0;font-size:11px;text-align:center;margin-top:22px;line-height:1.5}

/* ===================== CHROME ===================== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 18px}
.topbar .hello small{color:var(--muted);font-size:12.5px;font-weight:600;display:block}
.topbar .hello b{font-family:'Sora',sans-serif;font-size:21px}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#2a3a6b,var(--navy));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;cursor:pointer;border:none;overflow:hidden}
.ava-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pa-edit{position:relative;cursor:pointer}
.pa-cam{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ava-remove{display:block;margin-top:4px;font-size:12px;color:#c0392b;text-decoration:none}
.page-head{display:flex;align-items:center;gap:12px;padding:4px 0 16px}
.back{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 38px}
.page-head h2{font-family:'Sora',sans-serif;font-size:20px}
.section-title{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:20px 2px 12px}
.skeleton{color:var(--muted);font-size:13.5px;padding:24px 4px;text-align:center}

/* hero saldo */
.hero{background:linear-gradient(135deg,var(--navy) 0%, #1a2b5a 100%);border-radius:22px;padding:20px;color:#fff;
  position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,202,1,.35),transparent 70%)}
.hero .lab{font-size:12px;color:#aebbd9;font-weight:600;position:relative}
.hero .amt{font-family:'Sora',sans-serif;font-size:38px;font-weight:800;margin:4px 0 2px;position:relative}
.hero .due{font-size:13px;color:#cfd8ee;position:relative;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hero .pill{background:rgba(207,226,0,.18);color:var(--yellow);font-weight:700;padding:2px 9px;border-radius:999px;font-size:11.5px}
.hero .pill.green{background:rgba(34,202,1,.2);color:#8ef07a}
.hero .btn{margin-top:18px;height:46px;position:relative}

.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.stat{background:var(--card);border-radius:18px;padding:15px;box-shadow:var(--shadow)}
.stat .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.stat .ic.luce{background:rgba(244,196,48,.16);color:#b8860b}
.stat .ic.gas{background:rgba(34,202,1,.14);color:var(--green-dk)}
.stat small{color:var(--muted);font-size:12px;font-weight:600}
.stat .v{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;margin-top:2px}
.stat .v span{font-size:12px;color:var(--muted);font-weight:600}
.stat .stat-prev{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.stat .stat-prev b{color:var(--ink);font-weight:800;font-size:15px}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;cursor:pointer;color:var(--ink);font-family:inherit}
.quick .qic{width:54px;height:54px;border-radius:17px;background:var(--card);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;color:var(--navy);transition:transform .14s}
.quick button:active .qic{transform:scale(.93)}
.quick span{font-size:11px;font-weight:600;text-align:center;line-height:1.2}

/* liste bollette */
.seg{display:flex;background:#e2e7ef;border-radius:13px;padding:4px;margin-bottom:16px}
.seg button{flex:1;height:38px;border:none;background:transparent;border-radius:10px;font-family:inherit;
  font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(11,23,51,.08)}
.bill{display:flex;align-items:center;gap:13px;background:var(--card);border-radius:16px;padding:15px;margin-bottom:11px;
  box-shadow:var(--shadow);cursor:pointer;border:1px solid transparent;transition:border-color .15s;width:100%;text-align:left;font-family:inherit}
.bill:active{border-color:var(--green)}
.bill .bic{width:42px;height:42px;border-radius:12px;background:#eef1f6;display:flex;align-items:center;justify-content:center;color:var(--navy);flex:0 0 42px}
.bill .info{flex:1}
.bill .info b{font-size:14.5px}
.bill .info small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.bill .right{text-align:right}
.bill .right .eur{font-family:'Sora',sans-serif;font-weight:700;font-size:16px}
.status{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;
  letter-spacing:.03em;text-transform:uppercase;margin-top:3px}
.status.due{background:#fef3c7;color:var(--warn)}
.status.paid{background:#dcfce7;color:var(--ok)}

/* distinzione per tipo fornitura */
.bill--luce{border-left:4px solid #e0a200}
.bill--luce .bic{background:#fff7e0;color:#b8860b}
.bill--gas{border-left:4px solid #16a300}
.bill--gas .bic{background:#e7f9e1;color:#16a300}
.btag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:middle}
.btag--luce{background:#fff3cd;color:#9a6b00}
.btag--gas{background:#dcfce7;color:#15803d}

/* logo ufficiale (schermate scure: login/manutenzione) */
.logo-chip{background:#fff;border-radius:14px;padding:10px 16px;display:inline-flex;align-items:center}
.logo-img{max-height:40px;max-width:200px;display:block}
/* logo grande a tutta larghezza (schermata di accesso) */
.logo-chip--big{display:block;width:100%;padding:18px;border-radius:20px;text-align:center}
.logo-img--big{width:100%;max-width:100%;max-height:150px;height:auto;display:block;margin:0 auto;object-fit:contain}

/* dettaglio */
.detail-amt{background:var(--card);border-radius:20px;padding:22px;text-align:center;box-shadow:var(--shadow)}
.detail-amt .big{font-family:'Sora',sans-serif;font-size:40px;font-weight:800}
.detail-amt .due{color:var(--muted);font-size:13px;margin-top:4px}
.rows{background:var(--card);border-radius:18px;padding:6px 16px;margin-top:14px;box-shadow:var(--shadow)}
.rows .r{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.rows .r:last-child{border-bottom:none}
.rows .r span:first-child{color:#41506b}
.rows .r b{font-weight:700}
.rows .r.total b{color:var(--navy);font-size:15px}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:16px}

/* pagamento */
.pay-amt{text-align:center;padding:14px 0 6px}
.pay-amt small{color:var(--muted);font-size:13px;font-weight:600}
.pay-amt .big{font-family:'Sora',sans-serif;font-size:34px;font-weight:800;margin-top:2px}
.pm{display:flex;align-items:center;gap:13px;background:var(--card);border:2px solid var(--line);border-radius:15px;
  padding:15px;margin-bottom:11px;cursor:pointer;width:100%;font-family:inherit;text-align:left}
.pm.on{border-color:var(--green);background:#f5fff2}
.pm .pmic{width:40px;height:30px;border-radius:7px;background:#eef1f6;display:flex;align-items:center;justify-content:center;color:var(--navy);flex:0 0 40px;font-size:11px;font-weight:800}
.pm .nm{flex:1;font-size:14px;font-weight:600}
.pm .dot{width:20px;height:20px;border-radius:50%;border:2px solid #cbd3e0;flex:0 0 20px}
.pm.on .dot{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px #fff}
.note{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:14px;padding:12px 14px;background:#e9edf3;border-radius:12px}

/* esito */
.ok-wrap{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px}
.ok-circle{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-dk));
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 12px 30px rgba(34,202,1,.4);animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.ok-wrap h2{font-family:'Sora',sans-serif;font-size:24px;margin-bottom:8px}
.ok-wrap p{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:26px}

/* servizi */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.svc{background:var(--card);border-radius:18px;padding:18px 15px;box-shadow:var(--shadow);cursor:pointer;
  border:1px solid transparent;transition:border-color .15s, transform .14s;text-align:left;font-family:inherit;width:100%}
.svc:active{transform:scale(.97);border-color:var(--green)}
.svc .sic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:#eef1f6;color:var(--navy)}
.svc.feat .sic{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff}
.svc b{font-size:14.5px;display:block}
.svc small{color:var(--muted);font-size:12px;display:block;margin-top:3px;line-height:1.35}
.soon{display:inline-block;margin-top:8px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:#eef1f6;padding:3px 8px;border-radius:999px}
.svc .sic.sic-blue{background:#E8F0FE;color:#2563EB}
.svc .sic.sic-violet{background:#F1EBFE;color:#7C3AED}
.svc .sic.sic-amber{background:#FDF1DD;color:#D97706}
.svc .sic.sic-teal{background:#DDF3F8;color:#0891B2}
.svc .sic.sic-rose{background:#FCE7F1;color:#DB2777}
.svc .sic.sic-indigo{background:#E9E9FD;color:#4F46E5}
.svc .sic.sic-red{background:#FDE7EC;color:#E11D48}
.svc .sic.sic-green{background:#E3FBE8;color:#15C24E}
.svc .sic.sic-comm{background:#E3FBE8;color:#15C24E;animation:blinkFluo 1.1s steps(1,end) infinite}
.svc .sic.sic-esim{background:#FCE0F1;color:#E60E9B;animation:blinkFluo 1.1s steps(1,end) infinite}
.svc-comm b{color:#2BE800;text-shadow:0 0 9px rgba(57,255,20,.75);animation:blinkFluo 1.1s steps(1,end) infinite}
@keyframes blinkFluo{0%,50%{opacity:1}51%,100%{opacity:.32}}
@media (prefers-reduced-motion:reduce){.svc .sic.sic-comm,.svc .sic.sic-esim,.svc-comm b{animation:none}}

/* profilo */
.prof-head{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:18px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.prof-head .pa{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#2a3a6b,var(--navy));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px}
.prof-head b{font-family:'Sora',sans-serif;font-size:17px;display:block}
.prof-head small{color:var(--muted);font-size:12.5px}
.menu{background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.menu .mrow{display:flex;align-items:center;gap:13px;padding:15px 16px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600;cursor:pointer;width:100%;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit;text-align:left}
.menu .mrow:last-child{border-bottom:none}
.menu .mrow .mi{width:34px;height:34px;border-radius:10px;background:#eef1f6;display:flex;align-items:center;justify-content:center;color:var(--navy);flex:0 0 34px}
.menu .mrow .chev{margin-left:auto;color:#c0c8d6}
.menu .mrow .push-state{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.menu .mrow .push-state + .chev{margin-left:0}
.menu .mrow.on .push-state{color:#16a300}
.menu .mrow.logout{color:var(--danger)}
.menu .mrow.logout .mi{background:#fde8e8;color:var(--danger)}
.info-line{font-size:11.5px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.5}

/* banner avviso in home */
.ann{background:linear-gradient(135deg,#FF8A1E,#F26B00);border:none;color:#fff;border-radius:14px;padding:15px 16px;
  font-size:16px;font-weight:700;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start;line-height:1.4;
  box-shadow:0 6px 18px rgba(242,107,0,.32)}

/* schermata manutenzione */
#v-maint{flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:linear-gradient(160deg,var(--navy) 0%, var(--navy-2) 60%, #1c2c5c 100%)}
#v-maint.is-active{display:flex}
.maint-wrap{max-width:340px;color:#fff;padding:20px}
.maint-icon{font-size:50px;margin:6px 0 14px}
.maint-wrap h2{font-family:'Sora',sans-serif;font-size:24px;margin-bottom:8px}
.maint-wrap p{color:#aab6d4;font-size:14px;line-height:1.6}

/* banner installazione (in basso) */
.install-banner{position:fixed;bottom:var(--ib-bottom,0px);left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);z-index:55;
  display:flex;align-items:center;gap:12px;background:#fff;padding:12px 14px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(11,23,51,.20);border-top:1px solid var(--line)}
.install-banner .ib-icon{flex:0 0 auto;width:48px;height:48px}
.install-banner .ib-appicon{width:48px;height:48px;border-radius:11px;border:1px solid var(--line);object-fit:cover;display:block;background:#fff}
.install-banner .ib-icon--bell{display:flex;align-items:center;justify-content:center;border-radius:11px;background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff}
.install-banner .ib-text{flex:1;min-width:0}
.install-banner .ib-text b{font-size:14px;color:var(--ink);display:block;line-height:1.2}
.install-banner .ib-text small{font-size:12px;color:var(--muted);display:block;margin-top:1px}
.install-banner .ib-btn{flex:0 0 auto;height:38px;padding:0 16px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.install-banner .ib-close{flex:0 0 auto;width:28px;height:28px;border:none;background:none;color:#9aa4b6;font-size:24px;line-height:1;cursor:pointer;padding:0}
.app--banner .view{padding-bottom:172px}

/* riquadro istruzioni iPhone */
.ios-help{position:fixed;inset:0;z-index:80;background:rgba(11,23,51,.62);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}
.ios-help__card{position:relative;background:#fff;border-radius:20px;padding:24px 20px 20px;max-width:344px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ios-help__x{position:absolute;top:10px;right:12px;border:none;background:none;font-size:26px;color:#9aa4b6;cursor:pointer;line-height:1;padding:0}
.ios-help__card h3{margin:0 0 6px;font-size:19px;color:var(--ink);font-weight:800}
.ios-help__lead{margin:0 0 18px;font-size:13.5px;color:var(--muted);line-height:1.5}
.ios-help__step{display:flex;gap:13px;align-items:flex-start;margin-bottom:15px}
.ios-help__ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#eef3fb;display:flex;align-items:center;justify-content:center;color:var(--green-dk)}
.ios-help__ic svg{width:22px;height:22px}
.ios-help__step>div{font-size:14px;color:var(--ink);line-height:1.45}
.ios-help__step small{color:var(--muted);font-size:12px}
.ios-help__ok{margin-top:6px;width:100%;height:48px;border:none;border-radius:13px;background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer}
.ios-help__arrow{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;color:#fff;animation:iosbob 1.2s ease-in-out infinite;pointer-events:none}
.ios-help__arrow svg{width:38px;height:38px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
@keyframes iosbob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

/* barra inferiore */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--maxw);
  height:calc(72px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:flex;align-items:flex-start;padding-top:10px;z-index:40}
.tabbar.hidden{display:none}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;
  color:#9aa4b6;font-family:inherit;font-size:10.5px;font-weight:700;padding-top:4px}
.tab svg{width:24px;height:24px}
.tab.on{color:var(--green-dk)}

.home-anim > *{animation:rise .5s ease backwards}
.home-anim > *:nth-child(1){animation-delay:.02s}
.home-anim > *:nth-child(2){animation-delay:.08s}
.home-anim > *:nth-child(3){animation-delay:.14s}
.home-anim > *:nth-child(4){animation-delay:.2s}
.home-anim > *:nth-child(5){animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}


/* ============================================================
   ASSISTENTE AI (chat) — identico al sito (inc/ai-chat.css)
   ============================================================ */
/**
 * REI — Widget Assistente AI (chat 24/7)
 * Bolla flottante bottom-right su tutte le pagine; pannello full-screen su mobile.
 *
 * @since 1.8.0
 */

.rei-ai-chat {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: #0B1733;
}
.rei-ai-chat *, .rei-ai-chat *::before, .rei-ai-chat *::after { box-sizing: border-box; max-width: 100%; }

/* ===== FAB (bolla chiusa) ===== */
.rei-ai-chat__fab {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%; border: 0;
    background: linear-gradient(135deg, #22ca01 0%, #16a300 100%);
    color: #fff; cursor: pointer;
    box-shadow: 0 12px 28px rgba(34,202,1,0.45), 0 4px 10px rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rei-ai-chat__fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 36px rgba(34,202,1,0.55), 0 6px 14px rgba(0,0,0,0.22); }
.rei-ai-chat__fab:focus-visible { outline: 3px solid #FFB400; outline-offset: 3px; }
.rei-ai-chat__fab::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,202,1,0.35) 0%, rgba(34,202,1,0) 70%);
    z-index: -1;
    animation: rei-ai-pulse 2.4s ease-in-out infinite;
}
@keyframes rei-ai-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.15); opacity: 0.2; }
}
.rei-ai-chat__fab-icon { width: 30px; height: 30px; }
.rei-ai-chat__fab-dot {
    position: absolute; top: 6px; right: 6px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #FFB400; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Stato aperto: nascondi FAB */
.rei-ai-chat.is-open .rei-ai-chat__fab { display: none; }

/* ===== PANNELLO ===== */
.rei-ai-chat__panel {
    width: 380px; height: 580px; max-height: calc(100vh - 48px);
    background: #FFF4E6;
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 8px 20px rgba(0,0,0,0.14);
    display: flex; flex-direction: column;
    border: 1px solid rgba(0,0,0,0.06);
    transform-origin: bottom right;
    animation: rei-ai-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rei-ai-pop {
    from { transform: translateY(20px) scale(0.92); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.rei-ai-chat__panel[hidden] { display: none; }

/* Header */
.rei-ai-chat__header {
    background: linear-gradient(135deg, #22ca01 0%, #16a300 100%);
    color: #fff;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
}
.rei-ai-chat__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rei-ai-chat__avatar svg { width: 20px; height: 20px; }
.rei-ai-chat__title { flex: 1; min-width: 0; }
.rei-ai-chat__title-main { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.rei-ai-chat__title-sub { font-size: 11px; opacity: 0.92; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.rei-ai-chat__title-sub::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #7FE85F; box-shadow: 0 0 6px #7FE85F;
}
.rei-ai-chat__close {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 0; color: #fff;
    font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.rei-ai-chat__close:hover { background: rgba(255,255,255,0.28); }
.rei-ai-chat__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Body (lista messaggi) */
.rei-ai-chat__body {
    flex: 1; overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    background: #FFF4E6;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.rei-ai-chat__body::-webkit-scrollbar { width: 6px; }
.rei-ai-chat__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

.rei-ai-chat__msg {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.8px; line-height: 1.5;
    word-wrap: break-word;
    animation: rei-ai-msg-in 0.2s ease-out;
}
@keyframes rei-ai-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rei-ai-chat__msg--assistant {
    align-self: flex-start;
    background: #fff; color: #0B1733;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.rei-ai-chat__msg--user {
    align-self: flex-end;
    background: linear-gradient(135deg, #22ca01, #16a300);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(34,202,1,0.25);
}
.rei-ai-chat__msg strong { font-weight: 700; }
.rei-ai-chat__msg--assistant strong { color: #16a300; }
.rei-ai-chat__msg a { color: inherit; text-decoration: underline; }
.rei-ai-chat__msg--error {
    background: #fff5f5; color: #a31616;
    border: 1px solid #f5c2c2; box-shadow: none;
}

/* Indicatore "sta scrivendo…" */
.rei-ai-chat__typing {
    align-self: flex-start;
    background: #fff;
    padding: 12px 16px; border-radius: 16px; border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex; gap: 4px;
}
.rei-ai-chat__typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #22ca01;
    animation: rei-ai-typing 1.3s ease-in-out infinite;
}
.rei-ai-chat__typing span:nth-child(2) { animation-delay: 0.18s; }
.rei-ai-chat__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes rei-ai-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-4px); }
}

/* Chips suggerimenti */
.rei-ai-chat__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 16px 8px;
}
.rei-ai-chat__chips.is-hidden { display: none; }
.rei-ai-chat__chip {
    font-size: 12px; padding: 6px 12px; border-radius: 14px;
    background: #fff; border: 1px solid #d4f5c2; color: #16a300;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.rei-ai-chat__chip:hover { background: #eafbe7; transform: translateY(-1px); }

/* Footer (input) */
.rei-ai-chat__footer {
    padding: 10px 14px 8px;
    background: #FFF4E6;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.rei-ai-chat__form { margin: 0; }
.rei-ai-chat__input-wrap {
    display: flex; gap: 8px; align-items: center;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 22px;
    padding: 6px 6px 6px 14px;
    transition: border-color 0.15s;
}
.rei-ai-chat__input-wrap:focus-within { border-color: #22ca01; }
.rei-ai-chat__input {
    flex: 1; border: 0; outline: 0;
    font-size: 13.8px; padding: 8px 0;
    background: transparent; color: #0B1733;
    font-family: inherit;
}
.rei-ai-chat__send {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #22ca01, #16a300);
    border: 0; color: #fff; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, box-shadow 0.15s;
}
.rei-ai-chat__send:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(34,202,1,0.4); }
.rei-ai-chat__send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.rei-ai-chat__send svg { width: 16px; height: 16px; }
.rei-ai-chat__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rei-ai-chat__disclaimer {
    font-size: 10.5px; color: #888;
    text-align: center; margin-top: 6px;
}

/* ===== MOBILE: pannello full-screen ===== */
@media (max-width: 600px) {
    .rei-ai-chat { bottom: 16px; right: 16px; }
    /* v1.8.6: uso 100% invece di 100vw (100vw su iOS Safari include la scrollbar e
       sballa con la tastiera virtuale). overflow-x: hidden a tutti i livelli
       impedisce ai messaggi lunghi di trascinare fuori il pannello. */
    .rei-ai-chat.is-open {
        top: 0 !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        width: 100%;
        max-width: 100vw;
        height: 100vh; height: 100dvh;
        overflow: hidden;
    }
    .rei-ai-chat.is-open .rei-ai-chat__panel {
        width: 100%;
        max-width: 100%;
        height: 100%; max-height: 100%;
        border-radius: 0; border: 0;
        overflow: hidden; /* nessun overflow orizzontale possibile */
        animation: rei-ai-pop-mob 0.22s ease-out;
    }
    @keyframes rei-ai-pop-mob {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* body messaggi: scroll solo verticale, mai orizzontale */
    .rei-ai-chat__body {
        padding: 14px; gap: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        max-width: 100%;
    }
    /* v1.8.6: messaggi vincolati alla larghezza del body, spezzano sempre */
    .rei-ai-chat__msg {
        max-width: 85%;
        width: auto;
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 14.5px;
        box-sizing: border-box;
    }
    .rei-ai-chat__chips { padding: 0 14px 8px; max-width: 100%; }
    /* footer: blocca espansione, input non deve mai sforare */
    .rei-ai-chat__footer {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .rei-ai-chat__input-wrap { max-width: 100%; min-width: 0; }
    /* v1.8.7: 16px è il MINIMO per impedire ad iOS Safari di zoomare automaticamente
       sull'input quando l'utente lo tocca (lo zoom rendeva la chat fuori schermo) */
    .rei-ai-chat__input { min-width: 0; font-size: 16px; }
    .rei-ai-chat__header { padding-top: max(14px, env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
    .rei-ai-chat__fab::before { animation: none; }
    .rei-ai-chat__panel, .rei-ai-chat__msg, .rei-ai-chat__typing span { animation: none; }
}

/* posizione e dimensione nell'app: pulsante più piccolo, sopra la barra */
.rei-ai-chat{bottom:88px !important;right:16px !important}
.rei-ai-chat__fab{width:50px !important;height:50px !important}
.rei-ai-chat__fab-icon{width:24px !important;height:24px !important}
.rei-ai-chat__fab-dot{width:11px !important;height:11px !important;top:4px !important;right:4px !important}
/* quando c'è il banner "Installa", il pulsante sale per non coprirlo */
.app--banner .rei-ai-chat{bottom:150px !important}
@media (max-width:600px){.rei-ai-chat{right:14px !important}}

/* ===== profilo: scheda dati cliente ===== */
.dgroup{display:flex;gap:14px;padding:16px 2px;border-bottom:1px solid var(--line)}
.dg-ic{flex:0 0 36px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.dg-body{flex:1;min-width:0}
.dfield{padding:6px 0}
.dfield b{display:block;font-size:16px;color:var(--ink);font-weight:700;line-height:1.2}
.dfield span{display:block;font-size:15px;color:var(--muted);margin-top:2px;word-break:break-word}

/* ===== dilazioni ===== */
.empty-state{text-align:center;color:var(--muted);font-weight:700;font-size:17px;line-height:1.4;padding:48px 20px}
.empty-state small{display:block;font-weight:500;font-size:14px;margin-top:10px;color:var(--muted)}
.dil-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.dil-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dil-top b{font-size:16px;color:var(--ink)}
.dil-badge{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.dil-badge.wait{background:#fdf3d6;color:#8a6300}
.dil-badge.ok{background:#dcfce7;color:var(--ok)}
.dil-sub{font-size:13px;color:var(--muted);margin:6px 0 12px}
.rata{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.rata-info{flex:1;min-width:0}
.rata-info b{display:block;font-size:15px;color:var(--ink)}
.rata-info small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.rata-imp{font-weight:700;font-size:15px;color:var(--ink)}
.rata-pay{width:auto;padding:8px 16px;font-size:14px;margin:0}
.dil-del{display:block;width:100%;margin-top:12px;background:none;border:none;color:var(--danger);font-size:13px;font-weight:600;cursor:pointer;padding:6px}
.dil-select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font-size:15px;
  background:var(--card);color:var(--ink);-webkit-appearance:none;appearance:none}

/* autolettura: fornitura su due righe (label + tendina) */
.r.r-stack{display:block}
.r.r-stack > span{display:block;margin-bottom:2px}

/* etichette form (sistema di pagamento) */
.af-label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:5px}
input.dil-select::placeholder{color:#9aa3b2}

/* le tue forniture */
.fcard{display:block;width:100%;text-align:left;position:relative;cursor:pointer}
.fcard-pod{font-size:13px;color:var(--muted);margin:6px 0 2px;font-family:ui-monospace,Menlo,monospace}
.fcard-ind{font-size:14px;color:var(--ink);font-weight:600;padding-right:24px}
.fcard-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:22px;line-height:1}
.mc-check{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink);margin:4px 0 4px;cursor:pointer}
.mc-check input{width:18px;height:18px;accent-color:var(--green);flex:0 0 auto}