/**
REPO: dashboard-consulenti
MODULE: telefono (stile del pulsante)
PURPOSE: Stili del pulsante fisso «Telefono» e del suo avviso (prefisso cns-tel-).
DEPENDENCIES: css/cns-theme.css (variabili --font, --accent), js/telefono.js
EXPOSES: classi .cns-tel-*
LAST REVIEWED: 2026-11-04
WARNINGS: z-index 900: sopra i contenuti, sotto menu/finestre (>=1000). Tema: scuro
  di base, chiaro con body.light-mode. Niente font-weight 600.
CHANGE LOG
----------
2026-11-04 [AI] Added: prima stesura.
*/
.cns-tel-root [hidden]{display:none!important}
.cns-tel-root{
  position:fixed; right:16px; bottom:16px; z-index:900;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  font-family:var(--font,'Sofia Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  pointer-events:none;
}
.cns-tel-root > *{pointer-events:auto}
.cns-tel-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:48px; padding:0 1.1rem 0 1rem;
  background:#0b0c0f; color:#fff; border:1px solid rgba(255,255,255,.28);
  border-radius:999px; cursor:pointer;
  font:inherit; font-size:.95rem; font-weight:500; letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cns-tel-btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.42)}
.cns-tel-btn:focus-visible{outline:2px solid #ffd60a; outline-offset:3px}
.cns-tel-btn:disabled{opacity:.7; cursor:progress; transform:none}
.cns-tel-icona{flex:none; display:block}
.cns-tel-punto{width:9px; height:9px; border-radius:50%; background:#ffd60a; box-shadow:0 0 0 3px rgba(255,214,10,.28); flex:none}
.cns-tel-avviso{
  display:flex; align-items:flex-start; gap:.6rem; max-width:min(320px, calc(100vw - 32px));
  padding:.7rem .8rem .7rem .95rem; border-radius:14px;
  background:#ffd60a; color:#000; font-size:.88rem; line-height:1.35; font-weight:500;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  animation:cns-tel-entra .2s ease;
}
.cns-tel-avviso-testo{flex:1; min-width:0; overflow-wrap:anywhere}
.cns-tel-avviso-x{
  flex:none; width:24px; height:24px; border:0; border-radius:50%; background:rgba(0,0,0,.12);
  color:#000; font:inherit; font-size:1.05rem; line-height:1; cursor:pointer;
}
.cns-tel-avviso-x:focus-visible{outline:2px solid #000; outline-offset:2px}
@keyframes cns-tel-entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Tema chiaro: la pillola resta nera, serve solo un bordo piu' discreto. */
body.light-mode .cns-tel-btn{border-color:rgba(0,0,0,.2); box-shadow:0 6px 18px rgba(18,21,27,.25)}

/* Telefono stretto: solo icona + puntino. */
@media (max-width:767px){
  .cns-tel-root{right:12px; bottom:12px}
  .cns-tel-btn{width:52px; height:52px; padding:0; justify-content:center; position:relative}
  .cns-tel-testo{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .cns-tel-punto{position:absolute; top:8px; right:8px}
}
@media (prefers-reduced-motion:reduce){
  .cns-tel-btn,.cns-tel-avviso{transition:none; animation:none}
  .cns-tel-btn:hover{transform:none}
}