/*
 * L'ASSISTENZA. Gli stessi colori e gli stessi caratteri della vetrina — avorio,
 * inchiostro, verde bosco, Georgia per i titoli — con la forma di una chat a
 * canali: il binario scuro a sinistra, la conversazione a destra.
 *
 * Niente caratteri scaricati da fuori e niente immagini decorative: la pagina
 * chiede al dominio solo questo file, forum.js, il logo e le immagini che gli
 * utenti allegano.
 */
:root{
  --ivory:#f4f1eb; --ivory-dark:#e9e4db; --ink:#171816; --ink-soft:#4d504a; --muted:#6f716a;
  --line:#d6d1c7; --forest:#174b42; --forest-light:#e2ece8; --forest-soft:#c5ddd5;
  --white:#fff; --rosso:#9b2c1f; --ambra:#8a5a00;
  --radius:18px; --radius-sm:12px;
  --shadow:0 12px 32px rgba(23,24,22,.10);
  --binario:#16181a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--ink);min-width:320px;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--forest)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.2}
code{font:.92em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--ivory-dark);
  border-radius:5px;padding:1px 5px}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* L'esca per i programmi che compilano tutto: fuori dallo schermo, non
   display:none, che qualcuno di quei programmi sa riconoscere. */
.esca{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.salta{position:absolute;left:-9999px}
.salta:focus{left:16px;top:16px;z-index:50;background:var(--forest);color:#fff;padding:10px 18px;border-radius:999px}

/* ---- la cornice ---- */
.guscio{display:grid;grid-template-columns:276px minmax(0,1fr);min-height:100vh}
.binario{background:var(--binario);color:rgba(255,255,255,.72);padding:22px 16px;
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.marchio img{height:36px;width:auto}
.binario-titolo{font-weight:700;font-size:12px;line-height:1;font-family:inherit;letter-spacing:.14em;text-transform:uppercase;margin:6px 10px 0}
.binario-titolo a{color:rgba(255,255,255,.55);text-decoration:none}
.binario-menu summary{display:none}
.canali{display:flex;flex-direction:column;gap:2px}
.canale{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:rgba(255,255,255,.74);text-decoration:none;font-size:15px;transition:background .15s,color .15s}
.canale:hover{background:rgba(255,255,255,.07);color:#fff}
.canale.attivo{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.canale-segno{width:10px;text-align:center;opacity:.7}
.canale-staff{margin-top:10px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;border-radius:0 0 9px 9px}
.pallino{width:10px;height:10px;border-radius:50%;flex:none;background:hsl(var(--h,164) 55% 52%);
  box-shadow:0 0 0 3px hsl(var(--h,164) 55% 52% / .18)}
.binario-piede{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.conto{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;
  background:rgba(255,255,255,.06);border-radius:12px;padding:10px}
.conto .avatar{grid-row:span 2}
.conto-nome{color:#fff;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cookie-link{color:rgba(255,255,255,.55);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;padding:6px 10px}
.cookie-link:hover{color:#fff}
.conto form{display:inline}
.conto-link{background:none;border:0;color:rgba(255,255,255,.6);font:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0;margin-right:10px}
.conto-link:hover{color:#fff}
.conto-ospite{display:flex;gap:8px;background:none;padding:0}
.conto-ospite .bottone{flex:1;justify-content:center;padding:9px 12px;font-size:14px}
.lingue{display:flex;gap:6px;padding-left:4px}
.lingue a{color:rgba(255,255,255,.5);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:3px 7px;border-radius:6px}
.lingue a:hover{color:#fff}
.lingue a.attiva{color:#fff;background:rgba(255,255,255,.12)}
.corpo{padding:40px clamp(18px,4vw,56px) 70px;max-width:1120px;width:100%}

@media (max-width:900px){
  .guscio{grid-template-columns:1fr}
  .binario{position:static;height:auto;padding:14px 16px;gap:10px}
  .marchio img{height:30px}
  .binario-titolo{display:none}
  .binario-menu summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
    list-style:none;color:#fff;font-weight:600;padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.07)}
  .binario-menu summary::-webkit-details-marker{display:none}
  .binario-menu summary::after{content:"▾";opacity:.7}
  .binario-menu[open] summary::after{content:"▴"}
  .binario-menu .canali{margin-top:8px}
  .binario-piede{margin-top:0;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .conto{flex:1;min-width:0}
  .corpo{padding-top:26px}
}

/* ---- intestazioni ---- */
.testa{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
  padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.testa>div{max-width:62ch}
.occhiello{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--forest);margin-bottom:12px}
.testa h1{font-size:clamp(30px,4vw,42px)}
.lead{color:var(--ink-soft);font-size:17px;margin-top:12px}
.testa-link{margin-top:14px;font-size:14.5px}
.testa-canale h1{display:flex;align-items:center;gap:12px}
.ricerca{display:flex;gap:8px;min-width:min(100%,380px)}
.ricerca input{flex:1;min-width:0}
.blocco{margin-bottom:44px}
.blocco-titolo{font-size:22px;margin-bottom:16px}
.briciole{font-size:14px;margin-bottom:12px}
.briciole a{text-decoration:none;font-weight:600}
.testa-discussione{margin-bottom:24px}
.testa-discussione h1{font-size:clamp(26px,3.4vw,36px);margin-bottom:12px;overflow-wrap:anywhere}

/* ---- canali nella home ---- */
.schede-canali{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.scheda-canale{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:18px 20px;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;
  color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.scheda-canale:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:hsl(var(--h) 40% 70%)}
.scheda-canale .pallino{grid-row:span 2}
.scheda-canale-nome{font-weight:700;font-size:16px}
.scheda-canale-tipo{color:var(--muted);font-size:13.5px}

/* ---- elenco delle discussioni ---- */
.righe{list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden}
.riga+.riga{border-top:1px solid var(--line)}
.riga-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 18px;text-decoration:none;color:var(--ink);transition:background .15s}
.riga-link:hover{background:#faf8f4}
.riga-corpo{display:flex;flex-direction:column;gap:6px;min-width:0}
.riga-titolo{font-weight:650;font-size:16px;overflow-wrap:anywhere}
.riga-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.riga-chi{margin-left:2px}
.riga-canale{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink-soft)}
.riga-canale .pallino{width:8px;height:8px;box-shadow:none}
.riga-risposte{min-width:34px;text-align:center;font-weight:700;font-size:14px;color:var(--ink-soft);
  background:var(--ivory);border-radius:999px;padding:4px 10px}
.vuoto{color:var(--muted);padding:26px;background:var(--white);border:1px dashed var(--line);
  border-radius:var(--radius-sm);text-align:center}
.barra-filtri{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:18px}
.filtri{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13.5px;text-decoration:none;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;background:var(--white)}
.chip:hover{border-color:var(--forest-soft)}
.chip.attivo{background:var(--ink);border-color:var(--ink);color:#fff}
.pagine{display:flex;justify-content:space-between;margin-top:18px}

/* ---- pillole e segni ---- */
.pillola,.segno{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;
  border-radius:999px;padding:2px 9px;border:1px solid transparent;white-space:nowrap}
.tipo-problema{background:#fbe9e6;color:#8a2a1c}
.tipo-domanda{background:#e6eef8;color:#1f4a7a}
.tipo-proposta{background:#f3ecdc;color:#6b4d0e}
.stato-aperta{border-color:var(--line);color:var(--ink-soft)}
.stato-presa{background:#fff3d6;color:var(--ambra)}
.stato-risolta{background:var(--forest-light);color:var(--forest)}
.stato-chiusa{background:var(--ivory-dark);color:var(--muted)}
.segno{border-color:var(--line);color:var(--muted);font-weight:600}
.segno-privata{border-color:#b9c7e0;color:#2a4670}
.segno-attesa{border-color:#e6c77a;color:var(--ambra)}
.segno-staff{display:inline-block;font-weight:700;font-size:11px;line-height:1;font-family:inherit;letter-spacing:.04em;background:var(--forest);
  color:#fff;border-radius:5px;padding:4px 6px;margin-left:4px;vertical-align:1px}

/* ---- avatar: dodici tinte, scelte dal numero dell'utente ---- */
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:16px;color:#fff;background:hsl(var(--a) 38% 42%)}
.av-0{--a:164}.av-1{--a:12}.av-2{--a:222}.av-3{--a:38}.av-4{--a:280}.av-5{--a:190}
.av-6{--a:340}.av-7{--a:95}.av-8{--a:250}.av-9{--a:24}.av-10{--a:310}.av-11{--a:140}
.riga .avatar{width:36px;height:36px;font-size:14px}
.conto .avatar{width:34px;height:34px;font-size:14px}

/* ---- i messaggi ---- */
.messaggi{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden}
.messaggio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:18px 20px;
  transition:background .3s}
.messaggio+.messaggio{border-top:1px solid #ece8e0}
.messaggio:hover{background:#fcfbf8}
.messaggio:target{background:#fffbea}
.messaggio-testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px}
.autore{font-weight:700}
.autore.eliminato{font-weight:600;color:var(--muted);font-style:italic}
.messaggio-testa time{font-size:12.5px;color:var(--muted)}
.testo{color:var(--ink);overflow-wrap:anywhere}
.testo p+p{margin-top:10px}
.testo a{word-break:break-all}
.risolutiva{background:var(--forest-light);box-shadow:inset 4px 0 0 var(--forest)}
.risolutiva:hover{background:var(--forest-light)}
.in-attesa{background:#fffaf0;box-shadow:inset 4px 0 0 #e6c77a}
.nascosto{opacity:.55}
.nota{font-size:13px;font-weight:600;margin-bottom:6px}
.nota-risolutiva{color:var(--forest)}
.nota-attesa{color:var(--ambra)}
.nota-nascosto{color:var(--muted)}
.nota-privata{color:#2a4670;background:#edf2fa;border:1px solid #cad6ea;border-radius:10px;padding:10px 14px;
  margin-top:12px;font-weight:500}
.in-cima{margin-bottom:26px}
.in-cima .messaggio{border:1px solid var(--forest-soft);border-radius:var(--radius-sm)}
.allegati{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:12px;
  max-width:720px}
.allegato{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--ivory)}
.allegato img{width:100%;height:150px;object-fit:cover;transition:transform .3s}
.allegato:hover img{transform:scale(1.03)}
.azioni-staff{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pannello-staff{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:#eef1ef;
  border:1px solid var(--forest-soft);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:20px;font-size:14px}
.pannello-staff form{display:flex;align-items:center;gap:8px}
.pannello-titolo{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.pannello-staff select{padding:5px 8px;font-size:14px}

/* ---- scrivere ---- */
.compositore{margin-top:18px;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;display:flex;flex-direction:column;gap:12px}
.compositore:focus-within{border-color:var(--forest-soft)}
.compositore textarea{border:0;padding:4px;resize:vertical;min-height:96px;background:transparent}
.compositore textarea:focus{outline:none}
.compositore-azioni{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.suggerimento{font-size:12.5px;color:var(--muted)}
.invito{margin-top:18px;padding:18px;background:var(--white);border:1px dashed var(--line);
  border-radius:var(--radius-sm);text-align:center;color:var(--ink-soft)}
.modulo{display:flex;flex-direction:column;gap:18px;max-width:720px}
.campo{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14.5px;border:0}
.campo legend{margin-bottom:8px}
.campo small,.scelta small,.spunta small{font-weight:400;color:var(--muted);font-size:13px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--white);border:1.5px solid var(--line);
  border-radius:10px;padding:11px 13px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--forest);outline:none;box-shadow:0 0 0 3px var(--forest-light)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:none;accent-color:var(--forest);margin-top:2px}
.scelte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scelta,.spunta{display:flex;gap:10px;align-items:flex-start;font-weight:400;cursor:pointer}
.scelta{background:var(--white);border:1.5px solid var(--line);border-radius:10px;padding:12px}
.scelta:has(input:checked){border-color:var(--forest);background:var(--forest-light)}
.scelta span,.spunta span{display:flex;flex-direction:column;gap:2px}
.campo-file{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--ink-soft)}
.campo-file input{padding:9px;border-style:dashed}
.sotto{font-size:14px;color:var(--muted)}
@media (max-width:700px){.scelte{grid-template-columns:1fr}}

/* ---- bottoni ---- */
.bottone{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;line-height:1.2;font-family:inherit;padding:11px 20px;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
.bottone:hover{transform:translateY(-1px)}
.bottone-grande{padding:14px 26px;font-size:16px;align-self:flex-start}
.bottone-verde{background:var(--forest);color:#fff}
.bottone-verde:hover{background:#0f3a33}
.bottone-scuro{background:var(--ink);color:#fff}
.bottone-chiaro{background:var(--white);color:var(--ink);border-color:var(--line)}
.bottone-rosso{background:var(--rosso);color:#fff}
.bottone[aria-busy=true]{opacity:.6;pointer-events:none}
.bottone-piccolo{font-weight:600;font-size:12.5px;line-height:1;font-family:inherit;padding:6px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--white);color:var(--ink-soft);cursor:pointer}
.bottone-piccolo:hover{border-color:var(--forest);color:var(--forest)}

/* ---- avvisi ---- */
.avviso{border-radius:12px;padding:12px 16px;margin-bottom:22px;font-weight:600;font-size:15px}
.avviso ul{margin-left:18px}
.avviso-ok{background:var(--forest-light);color:var(--forest);border:1px solid var(--forest-soft)}
.avviso-info{background:#edf2fa;color:#2a4670;border:1px solid #cad6ea}
.errori{background:#fbe9e6;border:1px solid #efc3ba;color:#7a2417;border-radius:12px;padding:12px 16px;font-size:14.5px}
.errori ul{margin-left:18px}

/* ---- pagine di servizio ---- */
.scheda-centrata{max-width:520px;margin:4vh auto 0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px clamp(20px,4vw,40px);box-shadow:var(--shadow)}
.scheda-centrata h1{font-size:32px;margin-bottom:8px}
.scheda-centrata .lead{margin-bottom:22px}
.scheda-centrata .modulo{max-width:none}
.scheda-centrata p+p{margin-top:16px}
.colonne{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}
.riquadro{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;max-width:none}
.riquadro h2{font-size:21px}
.riquadro-pericolo{border-color:#efc3ba}
.riquadro-pericolo p{color:var(--ink-soft);font-size:14px}
.coda{list-style:none;display:flex;flex-direction:column;gap:12px}
.coda-voce{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px}
.coda-titolo{font-weight:700}
.coda-chi{font-size:13px;color:var(--muted);margin:4px 0 8px}
.installazione{padding:24px 16px}
.installazione h2{font-size:20px;margin-top:10px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}