/**
 * REPO: dashboard-consulenti
 * MODULE: css/centro-rinnovi-notifiche.css
 * PURPOSE: Veste la campanella delle notifiche del Centro Rinnovi
 *          (public/js/centro-rinnovi-notifiche.js, window.CRNotifiche):
 *          il bottone con pallino nella barra in alto (#cr-notifiche) e il
 *          pannello appeso a document.body (tendina ancorata su desktop,
 *          foglio a tutto schermo sotto 760px). Tema SOLO bianco, consuma
 *          i gettoni --cr-* definiti su body.cr-app in css/centro-
 *          rinnovi.css (font Sofia Pro incluso: nessun @font-face
 *          duplicato qui, nessun colore fisso fuori da quei gettoni).
 * DEPENDENCIES: css/centro-rinnovi.css (gettoni --cr-*, regola generale
 *          `.cr-app [hidden]{display:none!important}` — qui ne esiste una
 *          equivalente scoped a .crn-root, vedi WARNINGS), sprite SVG di
 *          centro-rinnovi.html (#cr-ic-campanella, #cr-ic-close).
 * EXPOSES: tutte le classi/gli id crn-*.
 * LAST REVIEWED: 2026-10-04
 * WARNINGS: il pannello (.crn-root) e' appeso a document.body da
 *          centro-rinnovi-notifiche.js: il posizionamento desktop (top/
 *          right) viene scritto INLINE da reposiziona() in quel file, con
 *          specificita' massima — la regola mobile qui sotto (@media
 *          max-width:760px) deve quindi usare !important per riprendere il
 *          controllo di top/right/inset su schermi piccoli (altrimenti lo
 *          stile inline vincerebbe sempre, anche sotto 760px). Non
 *          rimuovere `.crn-root[hidden]{display:none!important}`: la
 *          regola equivalente `.cr-app [hidden]` di css/centro-rinnovi.css
 *          si applica gia' (.crn-root e' comunque discendente di body.cr-
 *          app), ma questa e' richiesta esplicitamente come rete di
 *          sicurezza indipendente (il componente non deve MAI dipendere da
 *          un foglio di stile esterno per restare chiuso quando hidden).
 *          z-index 1500: sotto il foglio mobile della scheda contratto
 *          (css/centro-rinnovi-scheda.css, 2000) di proposito — se un clic
 *          su una notifica/promemoria apre la scheda (onApri), la scheda
 *          deve poter coprire il pannello che si sta chiudendo, non il
 *          contrario.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-04 [AI] Added: prima stesura (operaio W4, lavoro in parallelo con
 *          centro-rinnovi-calendario.css [W3] e le rotte server [W1]).
 */

/* ===================================================== 1 · BASE ===== */
.crn-root{
  position:fixed; z-index:1500; top:72px; right:16px; /* valori di scorta prima che reposiziona() li imposti */
}
.crn-root[hidden]{display:none!important}

.crn-panel{
  width:380px; max-width:calc(100vw - 20px);
  max-height:min(560px, calc(100vh - 90px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--cr-line,#ECEAE4); border-radius:var(--cr-radius,14px);
  box-shadow:var(--cr-shadow,0 8px 24px rgba(18,18,18,.12));
  font-family:var(--cr-font,'Sofia Pro',sans-serif); color:var(--cr-ink,#121212);
  animation:crn-apri .16s ease both;
}
@keyframes crn-apri{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .crn-panel{animation:none} }

.crn-i{width:19px;height:19px;display:inline-block;vertical-align:middle;flex:0 0 auto}

/* ===================================================== 2 · BOTTONE ===== */
.crn-bottone{
  position:relative; appearance:none; border:none; background:transparent; cursor:pointer;
  width:36px; height:36px; display:grid; place-items:center; border-radius:999px;
  color:var(--cr-ink-2,#4F4D47); transition:background .14s, color .14s;
}
.crn-bottone:hover{background:var(--cr-paper,#FAFAF7); color:var(--cr-ink,#121212)}
.crn-bottone:active{transform:scale(.96)}
.crn-badge{
  position:absolute; top:3px; right:1px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--cr-red,#D93636); color:#fff;
  font-family:var(--cr-font,'Sofia Pro',sans-serif); font-size:10.5px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff;
}

/* ===================================================== 3 · TESTA PANNELLO ===== */
.crn-panel-testa{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:14px 10px 14px 18px; border-bottom:1px solid var(--cr-line,#ECEAE4);
}
.crn-panel-titolo{margin:0; font-size:15px; font-weight:700}
.crn-chiudi{
  appearance:none; border:none; background:transparent; cursor:pointer;
  width:32px; height:32px; display:grid; place-items:center; border-radius:999px;
  color:var(--cr-ink-2,#4F4D47); transition:background .14s, color .14s;
}
.crn-chiudi:hover{background:var(--cr-paper,#FAFAF7); color:var(--cr-ink,#121212)}

.crn-panel-corpo{flex:1 1 auto; min-height:0; overflow-y:auto}

/* ===================================================== 4 · SEZIONI ===== */
.crn-sezione{padding:12px 18px 14px; border-bottom:1px solid var(--cr-line,#ECEAE4)}
.crn-sezione:last-child{border-bottom:none}
.crn-sezione-testa{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 6px}
.crn-sezione-titolo{
  margin:0; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--cr-ink-3,#8C897F);
}
.crn-segna-tutte{
  appearance:none; border:none; background:transparent; cursor:pointer; padding:0;
  font:inherit; font-size:12px; font-weight:500; color:var(--cr-blue,#2B59C3);
}
.crn-segna-tutte:hover{text-decoration:underline}
.crn-vuoto{margin:6px 2px 2px; font-size:13px; color:var(--cr-ink-3,#8C897F)}

.crn-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}

/* ===================================================== 5 · VOCI (notifiche + promemoria) ===== */
.crn-voce{margin:0}
.crn-voce-btn{
  width:100%; text-align:left; appearance:none; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; gap:1px; padding:8px 8px; border-radius:var(--cr-radius-sm,10px);
  font:inherit; color:var(--cr-ink,#121212); transition:background .14s;
}
.crn-voce-btn:hover{background:var(--cr-paper,#FAFAF7)}

/* Non letta: sfondo giallo marchio (MAI arancione), testo resta --cr-ink */
.crn-voce--non-letta .crn-voce-btn{background:var(--cr-accent-soft,#FFF6CC)}
.crn-voce--non-letta .crn-voce-btn:hover{background:#FFEE9E}

.crn-voce-titolo{font-size:13.5px; font-weight:700; color:var(--cr-ink,#121212)}
.crn-voce-testo{font-size:12.5px; color:var(--cr-ink-2,#4F4D47); line-height:1.4}
.crn-voce-meta{font-size:11.5px; color:var(--cr-ink-3,#8C897F); margin-top:2px}

/* ===================================================== 6 · PROMEMORIA ===== */
.crn-gruppo{margin-top:8px}
.crn-gruppo:first-child{margin-top:0}
.crn-gruppo-etichetta{
  display:flex; align-items:center; gap:6px; margin:0 0 4px 2px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--cr-ink-3,#8C897F);
}
.crn-gruppo-n{
  font-size:11px; font-weight:700; border-radius:999px; padding:0 7px;
  background:var(--cr-paper,#FAFAF7); color:var(--cr-ink-2,#4F4D47);
}
/* In ritardo: rosso (etichetta, conteggio e data della riga) */
.crn-gruppo--ritardo .crn-gruppo-etichetta{color:var(--cr-red,#D93636)}
.crn-gruppo--ritardo .crn-gruppo-n{background:var(--cr-red-soft,#FDECEC); color:var(--cr-red,#D93636)}
.crn-gruppo--ritardo .crn-prom-data{color:var(--cr-red,#D93636); font-weight:700}
/* Oggi: giallo marchio (MAI arancione), testo nero */
.crn-gruppo--oggi .crn-gruppo-n{background:var(--cr-amber-soft,#FFF4B8); color:var(--cr-ink,#121212)}

.crn-prom-cliente{font-size:13.5px; font-weight:700; color:var(--cr-ink,#121212)}
.crn-prom-auto{font-size:12px; color:var(--cr-ink-2,#4F4D47)}
.crn-prom-data{font-size:11.5px; color:var(--cr-ink-3,#8C897F)}

/* ===================================================== 7 · RESPONSIVE ===== */
/* Sotto 760px: foglio a tutto schermo invece della tendina ancorata. Deve
   vincere sullo style inline (top/right) scritto da reposiziona() in
   centro-rinnovi-notifiche.js — vedi WARNINGS in testa file: solo
   !important ci riesce, una regola non-inline non basterebbe. */
@media (max-width:760px){
  .crn-root{
    position:fixed!important; top:0!important; right:0!important; bottom:0!important; left:0!important;
  }
  .crn-panel{
    width:100%!important; max-width:none!important; height:100%!important; max-height:none!important;
    border-radius:0; border:none;
  }
  .crn-panel-testa{padding:16px 10px 16px 18px}
}