/* =========================================================
   HYPERVEX — scheda «Notifiche di questo telefono / computer» del coach (js/coach-notif.js, mig. 081).
   Tutto sotto .cn (scheda) e .cn-who (foglio «Per quali clienti?»): non tocca nient'altro dell'app.
   Telefono: tasti e righe ≥ 44 px, testo dei campi 16 px (niente zoom su iPhone). Computer: dentro CoachSet.card.
   Compatibilita' iPhone vecchi: niente proprieta' «inset», niente mescole di colore, niente selettore «has».
   Animazioni spente con «riduci movimento».
   ========================================================= */
.cn{ display:block; width:100%; }

/* «Valgono solo per questo telefono/computer» */
.cn-scope{ display:flex; gap:9px; align-items:flex-start; margin:4px 0 8px; padding:11px 13px; border-radius:14px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--txt-2); font-size:13px; font-weight:600; line-height:1.4; }
.cn-scope svg{ width:17px; height:17px; flex:none; margin-top:1px; color:var(--red); }

/* righe */
.cn-row{ display:flex; align-items:center; gap:12px; min-height:62px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.cn-ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--surface-2); color:var(--txt-2);
  transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.cn-ic svg{ width:18px; height:18px; }
.cn-row.is-on .cn-ic{ background:var(--red-soft); color:var(--red); }
.cn-row.cn-main .cn-ic{ background:var(--red-soft); color:var(--red); }
.cn-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cn-txt b{ font-size:15px; font-weight:800; color:var(--txt); line-height:1.25; }
.cn-txt > span{ font-size:12.5px; font-weight:600; color:var(--txt-3); line-height:1.38; }
.cn-state{ font-weight:700; }
.cn-state.ok{ color:#22C55E; }
.cn-state.warn{ color:#EAB308; }

/* interruttore: area di tocco 56×44, binario 50×30 */
.cn-sw{ position:relative; flex:none; width:56px; height:44px; padding:0; margin:0; border:0; background:none; display:grid; place-items:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cn-trk{ position:relative; display:block; width:50px; height:30px; border-radius:16px; background:var(--surface-3); transition:background .2s ease, box-shadow .25s ease; }
.cn-trk i{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.32);
  transition:left .24s cubic-bezier(.2,.8,.2,1), width .16s ease; }
.cn-sw.on .cn-trk{ background:var(--red); box-shadow:0 0 14px var(--red-glow); }
.cn-sw.on .cn-trk i{ left:23px; }
.cn-sw:active .cn-trk i{ width:28px; }
.cn-sw.on:active .cn-trk i{ left:19px; }
.cn-sw:focus-visible{ outline:2px solid var(--red); outline-offset:1px; border-radius:16px; }
.cn-sw[aria-disabled="true"], .cn-sw.is-dis{ opacity:.42; cursor:not-allowed; }
.cn-sw.just .cn-trk i{ animation:cnKnob .36s cubic-bezier(.3,1.35,.5,1); }
.cn-sw.just .cn-trk{ animation:cnGlow .5s ease-out; }
@keyframes cnKnob{ 0%{ transform:scale(.78); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
@keyframes cnGlow{ 0%{ box-shadow:0 0 0 0 var(--red-glow); } 100%{ box-shadow:0 0 14px var(--red-glow); } }

/* titoletti delle sezioni */
.cn-sec{ margin:20px 0 2px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-3); }

/* sotto una categoria accesa: «Dopo quanti giorni?» e «Per quali clienti?» */
.cn-more{ display:flex; flex-direction:column; gap:10px; padding:2px 0 12px 50px; border-bottom:1px solid var(--line-soft);
  animation:cnDrop .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cnDrop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.cn-days > span{ display:block; margin-bottom:7px; font-size:12.5px; font-weight:700; color:var(--txt-2); }
.cn-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cn-chip{ min-width:44px; min-height:44px; padding:0 12px; border-radius:13px; border:1px solid var(--line); background:var(--surface-2); color:var(--txt);
  font-size:15px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; }
.cn-chip.on{ background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 0 12px var(--red-glow); }
.cn-chip:active{ transform:scale(.93); }
.cn-who-btn{ display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:8px 12px; border-radius:13px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--txt); font-size:14px; font-weight:700; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease, transform .15s ease; }
.cn-who-btn svg{ width:16px; height:16px; flex:none; color:var(--txt-2); }
.cn-who-btn span{ flex:1; min-width:0; }
.cn-who-btn em{ font-style:normal; font-size:13px; font-weight:800; color:var(--red); white-space:nowrap; }
.cn-who-btn:active{ transform:scale(.985); }
@media (hover:hover){ .cn-who-btn:hover{ border-color:var(--red); } .cn-chip:hover{ border-color:var(--red); } }
/* telefono: sotto la categoria si usa tutta la larghezza, cosi' i 7 giorni stanno su una riga */
@media (max-width:520px){
  .cn-more{ padding-left:0; }
  .cn-chips{ gap:5px; flex-wrap:nowrap; }
  .cn-chip{ flex:1 1 0; min-width:44px; padding:0 4px; }
}

/* «Imposta le consigliate» */
.cn-rec{ margin:12px 0 4px; padding:15px; border-radius:18px; border:1px solid rgba(255,46,62,.38);
  background:linear-gradient(135deg, var(--red-soft), rgba(255,46,62,0) 72%); }
.cn-rec-t{ display:flex; gap:8px; align-items:center; font-size:15px; color:var(--txt); }
.cn-rec-t svg{ width:18px; height:18px; color:var(--red); }
.cn-rec p{ margin:7px 0 12px; font-size:13px; font-weight:600; color:var(--txt-2); line-height:1.42; }
.cn-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; padding:0 16px; border:0; border-radius:15px;
  background:linear-gradient(135deg, var(--red), var(--red-deep)); color:#fff; font-size:15.5px; font-weight:800; cursor:pointer;
  box-shadow:0 8px 22px var(--red-glow); -webkit-tap-highlight-color:transparent; transition:transform .15s ease, box-shadow .2s ease; }
.cn-btn svg{ width:18px; height:18px; }
.cn-btn:active{ transform:scale(.975); }
.cn-btn:disabled{ opacity:.6; cursor:wait; }

/* «Dolore segnalato · In arrivo» */
.cn-soon{ display:inline-block; margin-right:7px; padding:2px 8px; border-radius:999px; background:var(--surface-3); color:var(--txt-2);
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; vertical-align:1px; }
.cn-row.is-soon .cn-txt b{ color:var(--txt-2); }
.cn-row.is-soon .cn-ic{ opacity:.6; }

/* note */
.cn-off, .cn-dndnow{ display:flex; gap:9px; align-items:flex-start; margin:12px 0 0; padding:11px 13px; border-radius:14px; background:var(--bg-2);
  border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--txt-2); line-height:1.42; }
.cn-off svg, .cn-dndnow svg{ width:16px; height:16px; flex:none; margin-top:1px; }
.cn-dndnow{ margin:8px 0 2px; border-color:rgba(234,179,8,.4); }
.cn-dndnow svg{ color:#EAB308; }
.cn-test{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin-top:18px; border-radius:15px;
  border:1px solid var(--line); background:transparent; color:var(--txt); font-size:14.5px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cn-test svg{ width:17px; height:17px; }
.cn-test:disabled{ opacity:.55; }

/* entrata (solo quando la scheda compare) */
.cn.intro > *{ animation:cnIn .44s cubic-bezier(.2,.8,.2,1) both; }
.cn.intro > *:nth-child(2){ animation-delay:.04s; }
.cn.intro > *:nth-child(3){ animation-delay:.08s; }
.cn.intro > *:nth-child(4){ animation-delay:.11s; }
.cn.intro > *:nth-child(5){ animation-delay:.14s; }
.cn.intro > *:nth-child(6){ animation-delay:.17s; }
.cn.intro > *:nth-child(n+7){ animation-delay:.2s; }
@keyframes cnIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- foglio «Per quali clienti?» ---------- */
.cn-who{ display:flex; flex-direction:column; gap:12px; }
.cn-seg{ display:flex; gap:4px; padding:4px; border-radius:15px; background:var(--surface-2); }
.cn-seg button{ flex:1; min-height:46px; border:0; border-radius:12px; background:transparent; color:var(--txt-2); font-size:15px; font-weight:800;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .22s ease, color .22s ease, box-shadow .22s ease; }
.cn-seg button.on{ background:var(--surface); color:var(--txt); box-shadow:0 2px 10px rgba(0,0,0,.28); }
.cn-note{ margin:0; font-size:13px; font-weight:600; color:var(--txt-2); line-height:1.42; }
.cn-search{ display:flex; align-items:center; gap:9px; min-height:50px; padding:0 13px; border-radius:15px; border:1px solid var(--line); background:var(--surface); }
.cn-search svg{ width:18px; height:18px; flex:none; color:var(--txt-3); }
.cn-search input{ flex:1; min-width:0; height:48px; padding:0; border:0; outline:0; background:transparent; color:var(--txt); font-size:16px; font-weight:600; -webkit-appearance:none; appearance:none; }
.cn-search:focus-within{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.cn-bulk{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cn-bulk span{ flex:1; min-width:110px; font-size:13px; font-weight:700; color:var(--txt-3); }
.cn-bulk button{ min-height:44px; padding:0 13px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--txt);
  font-size:13.5px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cn-list{ display:flex; flex-direction:column; }
.cn-cli{ display:flex; align-items:center; gap:10px; min-height:60px; padding:6px 0; border-bottom:1px solid var(--line-soft); }
.cn-cli[hidden]{ display:none; }
.cn-av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--surface-3); color:var(--txt-2);
  font-size:13px; font-weight:800; transition:background .22s ease, color .22s ease; }
.cn-cli.on .cn-av{ background:var(--red-soft); color:var(--red); }
.cn-nm{ flex:1; min-width:0; font-size:15px; font-weight:700; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-cli:not(.on) .cn-nm{ color:var(--txt-2); }
.cn-dsel{ flex:none; max-width:122px; min-height:44px; padding:0 6px; border-radius:11px; border:1px solid var(--line); background:var(--surface);
  color:var(--txt); font-size:16px; font-weight:700; }
.cn-empty{ display:flex; gap:10px; align-items:center; padding:16px; border-radius:15px; border:1px dashed var(--line); color:var(--txt-2); font-size:14px; font-weight:600; }
.cn-empty svg{ width:20px; height:20px; flex:none; }
.cn-who-foot{ position:-webkit-sticky; position:sticky; bottom:0; z-index:2; margin-top:4px; padding:12px 0 4px;
  background:linear-gradient(rgba(0,0,0,0), var(--bg-2) 30%); }
.cn-who.intro .cn-cli{ animation:cnIn .38s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 22ms); }

@media (prefers-reduced-motion:reduce){
  .cn *, .cn-who *{ animation:none !important; transition:none !important; }
}