/* console.css — stili della console.
   Trasferito da docs/preview/console-anteprima.html (anteprima approvata il
   2026-08-21). Le regole visive stanno in Appendice A della spec: tema chiaro
   unico, accento azzurro usato con parsimonia, una sola card scura per
   schermata. Palette provvisoria: quando arrivano i colori ufficiali di 2B si
   sostituiscono --accent e --accent-deep. */
:root {
  /* fondo: lavaggio azzurrino chiarissimo */
  --ground:       #EEF4FB;
  --ground-warm:  #FBFDFE;
  --ground-cool:  #DCE9F7;

  --card:         #FFFFFF;
  --glass:        rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-edge:   rgba(255, 255, 255, .9);

  --ink:    #0F1720;
  --ink-2:  #56636F;
  --ink-3:  #8A97A4;
  --line:   rgba(15, 23, 32, .07);
  --line-2: rgba(15, 23, 32, .13);

  /* azzurro: brillante per i riempimenti, profondo dove ci va del testo
     o un tratto di grafico (validato a contrasto sul bianco) */
  --accent:      #3FA9F5;
  --accent-deep: #1583CC;
  --accent-soft: #D3E9FB;
  --accent-tint: #ECF6FE;

  /* la card scura: il contrappunto dello stile */
  --dark:    #131A22;
  --dark-2:  #1F2A34;
  --dark-3:  #33414D;
  --on-dark: #EEF3F8;

  --good: #15704A; --good-soft: #E3F1EA;
  --warn: #C77A06; --warn-soft: #FBEEDA;
  --crit: #B0202C; --crit-soft: #FAE7E8;

  /* Scala di spaziatura. Prima ogni view metteva il proprio margin-bottom a
     mano, e dove qualcuno se ne dimenticava le card risultavano incollate.
     Adesso il ritmo verticale lo decide il foglio di stile, una volta sola. */
  --sp-1: .5rem;
  --sp-2: .85rem;
  --sp-3: 1.25rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;

  --r-card: 22px;
  --r-sm:   14px;
  --r-pill: 999px;

  --shadow:    0 1px 2px rgba(15, 23, 32, .04), 0 10px 30px -14px rgba(15, 23, 32, .18);
  --shadow-lg: 0 2px 6px rgba(15, 23, 32, .05), 0 28px 60px -24px rgba(15, 23, 32, .28);

  --f-ui:      "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Outfit", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 90% at 88% -10%, var(--ground-warm) 0%, rgba(251, 253, 254, 0) 55%),
    radial-gradient(100% 80% at 5% 105%, var(--ground-cool) 0%, rgba(220, 233, 247, 0) 60%),
    var(--ground);
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }

a { color: var(--accent-deep); }

/* Card, voci di navigazione e marchio sono collegamenti: senza questo
   ereditano sottolineatura e colore del link, e la pagina si riempie di
   righe blu. Nell'anteprima erano <button>, qui devono essere <a> veri
   perché la navigazione funzioni anche senza JavaScript. */
.navitem, .postcard, .brand { text-decoration: none; color: inherit; }
.navitem:hover, .postcard:hover, .brand:hover { text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------- barra di navigazione a pillole ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 1.4rem;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .85rem .35rem .4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  flex: none;
}
.brand b { font-size: .92rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

.pillnav {
  display: flex;
  gap: .15rem;
  padding: .25rem;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.pillnav::-webkit-scrollbar { display: none; }

.navitem {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: .855rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.navitem:hover { background: rgba(255, 255, 255, .75); color: var(--ink); }
.navitem[aria-current="page"] { background: var(--dark); color: #fff; }
.navitem[aria-current="page"] svg { color: #fff; }
.navitem svg { color: var(--ink-3); }

.navitem .badge {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  min-width: 1.05rem;
  text-align: center;
  padding: 0 .25rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  line-height: 1.5;
}
.navitem[aria-current="page"] .badge { background: var(--accent); color: var(--dark); }

.topbar-right { display: flex; align-items: center; gap: .45rem; flex: none; }

.iconbtn {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: var(--shadow);
  flex: none;
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-2); }


/* ---------------- impaginazione ---------------- */

.page { max-width: 84rem; margin: 0 auto; padding: var(--sp-5) 1.4rem 5rem; }

/* Il "gufo": ogni blocco di primo livello prende aria da quello che lo precede.
   Vale anche dentro le sezioni, così una card non tocca mai la successiva
   senza che qualcuno debba ricordarsi di scriverlo nella view. */
.page > * + *,
.sezione > * + * { margin-top: var(--sp-4); }

/* Il titolo di pagina respira di più: è l'inizio di un discorso nuovo. */
.page > .pagehead + * { margin-top: var(--sp-5); }

.pagehead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Un avviso appartiene a ciò che lo segue: gli sta più vicino di quanto stia
   a ciò che lo precede, altrimenti sembra riferirsi al blocco sbagliato. */
.page > .note + * { margin-top: var(--sp-3); }

.sezione-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.sezione-testa h2 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: -.015em;
}

.pagehead h1 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -.028em;
  line-height: 1.05;
}
.pagehead h1 em { font-style: normal; color: var(--accent-deep); }
.pagehead .sub { margin: .35rem 0 0; color: var(--ink-3); font-size: .9rem; }

/* numeroni alla destra del titolo */
.bignums { display: flex; gap: 1.9rem; flex-wrap: wrap; }
.bignum { display: flex; flex-direction: column; gap: .1rem; }
.bignum .v {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.bignum .v small { font-size: 1.1rem; font-weight: 300; color: var(--ink-3); margin-left: .12rem; }
.bignum .k {
  font-size: .74rem;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.bignum .k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.bignum.is-warn .k::before { background: var(--warn); }
.bignum.is-crit .k::before { background: var(--crit); }
.bignum.is-mute .k::before { background: var(--ink-3); }

/* ---------------- card ---------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--glass-edge);
}

.card.tint {
  background: linear-gradient(155deg, #E4F2FD 0%, rgba(255, 255, 255, .95) 58%);
}

.card.dark {
  background: linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 70%);
  border-color: rgba(255, 255, 255, .08);
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
}
.card.dark .card-head { border-bottom-color: rgba(255, 255, 255, .1); }
.card.dark .card-head h2 { color: #fff; }
.card.dark .muted, .card.dark .card-head .sub { color: #94A5B5; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.card-head h2 { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.card-head .sub { font-size: .78rem; color: var(--ink-3); }
.card-body { padding: 1.25rem; }
.card-body > * + * { margin-top: var(--sp-3); }
.card-body > p + p { margin-top: var(--sp-2); }
.card-body.tight { padding: .6rem 0; }

.gobtn {
  width: 1.85rem; height: 1.85rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.gobtn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.card.dark .gobtn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: #fff; }
.card.dark .gobtn:hover { background: var(--accent); color: var(--dark); }

.grid { display: grid; gap: var(--sp-3); align-items: start; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ---------------- controlli ---------------- */

.btn {
  font: inherit;
  font-size: .845rem;
  font-weight: 500;
  padding: .48rem .95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  box-shadow: var(--shadow);
  transition: transform .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: transparent;
  color: #fff;
}
.btn-dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn-danger { color: var(--crit); }
.btn-danger:hover { background: var(--crit-soft); border-color: rgba(176, 32, 44, .3); }
.btn[disabled] { opacity: 1; cursor: not-allowed; box-shadow: none; color: var(--ink-3); background: rgba(15, 23, 32, .06); border-color: transparent; }
.btn-primary[disabled] { background: rgba(15, 23, 32, .06); }
.btn[disabled]:hover { transform: none; }
.btn-sm { font-size: .78rem; padding: .32rem .7rem; }

/* stato: colore + SEMPRE etichetta, mai il colore da solo */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .73rem;
  font-weight: 500;
  padding: .18rem .6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-good { color: var(--good); background: var(--good-soft); border-color: rgba(21, 112, 74, .18); }
.chip-warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(199, 122, 6, .2); }
.chip-crit { color: var(--crit); background: var(--crit-soft); border-color: rgba(176, 32, 44, .2); }
.chip-info { color: var(--accent-deep); background: var(--accent-tint); border-color: var(--accent-soft); }
.chip-mute { color: var(--ink-2); background: rgba(15, 23, 32, .05); border-color: var(--line); }
.card.dark .chip-crit { color: #FF9E9E; background: rgba(255, 120, 120, .13); border-color: rgba(255, 140, 140, .22); }
.card.dark .chip-warn { color: #F0C46A; background: rgba(240, 196, 106, .13); border-color: rgba(240, 196, 106, .22); }
.card.dark .chip-info { color: #7FC6F7; background: rgba(127, 198, 247, .13); border-color: rgba(127, 198, 247, .22); }

.tag {
  font-size: .7rem;
  font-weight: 500;
  color: var(--ink-2);
  background: rgba(15, 23, 32, .045);
  padding: .12rem .55rem;
  border-radius: var(--r-pill);
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: .92em; }
.muted { color: var(--ink-3); }
.small { font-size: .8rem; }

/* barra a segmenti: composizione della coda */
.segbar { display: flex; gap: 3px; height: 2.1rem; }
.seg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 500;
  padding: 0 .7rem;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.seg i { font-style: normal; }
.seg-a { background: var(--warn-soft); color: var(--warn); }
.seg-b { background: var(--accent-soft); color: var(--accent-deep); }
.seg-c { background: var(--dark); color: #fff; }
.seg-d { background: var(--crit-soft); color: var(--crit); }

/* liste */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.card.dark .row { border-bottom-color: rgba(255, 255, 255, .08); }
.row .t { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-3); flex: none; width: 5.2rem; }
.card.dark .row .t { color: #7D8FA0; }
.row .x { flex: 1; min-width: 0; font-size: .87rem; }

.alert { display: flex; gap: .75rem; padding: .85rem 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, .08); align-items: flex-start; }
.alert:last-child { border-bottom: 0; }
.alert .tx { flex: 1; min-width: 0; }
.alert .tx b { font-size: .875rem; font-weight: 600; display: block; }
.alert .tx p { margin: .2rem 0 0; font-size: .81rem; color: #9FB0BF; }

/* anello di stato */
.ringwrap { display: flex; align-items: center; gap: 1.1rem; }
.ring { position: relative; width: 6.6rem; height: 6.6rem; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .lbl {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .05rem;
}
.ring .lbl b { font-family: var(--f-display); font-weight: 300; font-size: 1.5rem; letter-spacing: -.03em; }
.ring .lbl span { font-size: .66rem; color: var(--ink-3); }

/* tabelle */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .855rem; }
th {
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-3);
  text-align: left;
  padding: .6rem 1.15rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: .68rem 1.15rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--accent-tint); }
td.num, th.num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: .92em; }

/* colonne dei post */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1rem; align-items: start; }

.col-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: 0 .35rem .6rem;
}
.col-head h3 { font-size: .82rem; font-weight: 600; letter-spacing: -.005em; }
.col-head .n {
  font-family: var(--f-mono); font-size: .72rem; color: var(--ink-2);
  background: rgba(15, 23, 32, .055); padding: .05rem .45rem; border-radius: var(--r-pill);
}

.postcard {
  width: 100%;
  text-align: left;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .9rem;
  margin-bottom: .65rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .15s ease;
}
.postcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.postcard .when { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
/* Le caption vere sono lunghe: in bacheca se ne mostrano tre righe,
   il testo intero sta nell'editor. */
.postcard.bad { border-color: rgba(176, 32, 44, .28); background: linear-gradient(160deg, var(--crit-soft) 0%, #fff 55%); }


/* editor */
.editor { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 940px) { .editor { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label { font-size: .74rem; font-weight: 500; color: var(--ink-3); }

textarea, input[type="text"], input[type="datetime-local"], input[type="search"], select {
  font: inherit;
  font-size: .875rem;
  padding: .6rem .8rem;
  background: rgba(255, 255, 255, .75);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  width: 100%;
}
textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
select { cursor: pointer; }

.counter { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }

.checks { display: flex; flex-direction: column; gap: .7rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; }
.check .m {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-size: .72rem; font-weight: 600; margin-top: .05rem;
}
.check.ok .m { background: var(--good-soft); color: var(--good); }
.check.no .m { background: var(--crit-soft); color: var(--crit); }
.check.wa .m { background: var(--warn-soft); color: var(--warn); }

.slidebox {
  flex: none; width: 6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.slidebox .art {
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent-tint), rgba(255, 255, 255, .6));
}
.slidebox .cp { font-family: var(--f-mono); font-size: .64rem; padding: .25rem .4rem; color: var(--ink-3); display: flex; justify-content: space-between; border-top: 1px solid var(--line); }
.slidebox.add { border-style: dashed; box-shadow: none; background: rgba(255, 255, 255, .5); }
.slidebox.add .art { background: none; }

/* materiale */
.dropzone {
  border: 1.5px dashed var(--accent-soft);
  border-radius: var(--r-card);
  padding: 2rem 1rem;
  text-align: center;
  background: linear-gradient(160deg, var(--accent-tint) 0%, rgba(255, 255, 255, .55) 70%);
  color: var(--ink-2);
  font-size: .875rem;
}

.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; }
.asset { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.asset .art { aspect-ratio: 4 / 5; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent-tint), rgba(255, 255, 255, .5)); }
.asset .meta { padding: .5rem .6rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.asset .fn { font-family: var(--f-mono); font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 .7rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow .mono { color: var(--ink-3); font-weight: 400; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* nota informativa */
.note {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .82rem; line-height: 1.45;
  color: var(--ink-2);
  background: linear-gradient(160deg, var(--accent-tint) 0%, rgba(255, 255, 255, .7) 70%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-sm);
  padding: .75rem .9rem;
}
.note svg { flex: none; color: var(--accent-deep); margin-top: .1rem; }

/* barre orizzontali */
.barrow { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 2.2fr) auto; gap: .8rem; align-items: center; font-size: .84rem; padding: .32rem 0; }
.bartrack { height: .55rem; background: rgba(15, 23, 32, .06); border-radius: var(--r-pill); overflow: hidden; }
.barfill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%); }
.barval { font-family: var(--f-mono); font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 3.6rem; text-align: right; }

/* log */
.logbox {
  font-family: var(--f-mono);
  font-size: .745rem;
  line-height: 1.7;
  background: var(--dark);
  color: #C6D4E0;
  border-radius: var(--r-sm);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  white-space: pre;
}
.logbox .ok { color: #6FD4A2; }
.logbox .no { color: #FF9E9E; }
.logbox .wa { color: #F0C46A; }
.logbox .hd { color: #7D8FA0; }

/* interruttore */
.switch { display: flex; align-items: center; gap: .8rem; }
.switchbox {
  width: 2.9rem; height: 1.6rem;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 32, .12);
  position: relative; flex: none; cursor: pointer;
  border: 0;
  transition: background .15s ease;
}
.switchbox::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 32, .3);
  transition: transform .16s ease;
}
.switchbox[aria-checked="true"] { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
/* Sola lettura: mostra lo stato, non invita a cliccare. */
.switchbox.sola-lettura { cursor: default; }
.switchbox.acceso { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.switchbox.acceso::after { transform: translateX(1.3rem); }
.switchbox[aria-checked="true"]::after { transform: translateX(1.3rem); }

/* grafici */
.chart { width: 100%; display: block; overflow: visible; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--ink-3); font-family: var(--f-mono); font-size: 10px; }
.chart .series { fill: none; stroke: var(--accent-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .endpoint { fill: var(--accent-deep); stroke: #fff; stroke-width: 3; }
.chart .bar { fill: url(#barfill); }
.chart .hit { fill: transparent; cursor: pointer; }

.tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--dark);
  color: #fff;
  border-radius: 10px;
  padding: .4rem .65rem;
  font-size: .76rem;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
.tip .tv { font-family: var(--f-mono); font-weight: 500; }
.tip[hidden] { display: none; }

/* scheda lead */
.drawer-bg { position: fixed; inset: 0; background: rgba(15, 23, 32, .35); backdrop-filter: blur(3px); z-index: 50; }
.drawer {
  position: fixed; z-index: 51;
  top: .7rem; right: .7rem; bottom: .7rem;
  width: min(27rem, calc(100% - 1.4rem));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer-head { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; background: linear-gradient(160deg, var(--accent-tint), rgba(255, 255, 255, 0) 75%); }
.drawer-body { padding: 1.2rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1.3rem; }
.drawer-foot { padding: .9rem 1.2rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; flex-wrap: wrap; }
[hidden] { display: none !important; }

.deflist { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .855rem; align-items: baseline; }
.deflist dt { font-size: .74rem; color: var(--ink-3); }
.deflist dd { margin: 0; }

.timeline { border-left: 1.5px solid var(--accent-soft); margin: 0; padding: 0 0 0 .95rem; list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.timeline li { position: relative; font-size: .84rem; }
.timeline li::before { content: ""; position: absolute; left: -1.2rem; top: .42rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.timeline li .t { display: block; font-family: var(--f-mono); font-size: .71rem; color: var(--ink-3); }

.segctl { display: inline-flex; padding: .22rem; background: rgba(15, 23, 32, .05); border-radius: var(--r-pill); gap: .15rem; }
.segctl button {
  border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 500;
  padding: .3rem .75rem; border-radius: var(--r-pill); color: var(--ink-2); cursor: pointer;
}
.segctl button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

/* ---------------- telefono ---------------- */

@media (max-width: 880px) {
  
  /* backdrop-filter crea un blocco di contenimento: se resta sulla topbar,
     il position:fixed della navigazione si ancora a lei invece che allo
     schermo e la barra non scende in fondo. */
  .topbar { padding: .6rem .9rem; backdrop-filter: none; background: rgba(255, 255, 255, .92); }
  .brand b { display: none; }

  .pillnav {
    position: fixed;
    inset: auto .55rem calc(.55rem + env(safe-area-inset-bottom)) .55rem;
    z-index: 40;
    background: var(--glass-strong);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: var(--shadow-lg);
    flex: none;
  }
  .navitem { flex-direction: column; gap: .1rem; padding: .45rem .6rem; font-size: .66rem; }
  .navitem .badge { position: absolute; transform: translate(.75rem, -.5rem); }

  .page { padding: 1.1rem .85rem 6rem; }
  .pagehead { align-items: flex-start; gap: 1rem; }

  .bignums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; width: 100%; }
  .bignum .v { font-size: 1.9rem; }

  .seg i { display: none; }
  .seg { padding: 0 .45rem; }

  /* la riga diventa due livelli: ora e stato sopra, testo sotto */
  .row { flex-wrap: wrap; gap: .3rem .6rem; padding: .7rem .95rem; }
  .row .t { width: auto; order: 1; }
  .row .chip { order: 2; margin-left: auto; }
  .row .x { order: 3; flex: 1 0 100%; }
  /* sullo stretto lo stato scende sotto le reti, allineato al testo:
     a fianco schiacciava il titolo a due parole per riga */
  .row.uscita { align-items: flex-start; gap: .5rem .8rem; }
  .row.uscita .uscita-cop { width: 3.4rem; }
  .row.uscita .uscita-corpo { order: 0; flex: 1 1 70%; }
  .row.uscita > .chip { order: 3; margin-left: calc(3.4rem + .8rem); }

  .drawer { top: .5rem; right: .5rem; bottom: .5rem; left: .5rem; width: auto; }
}

/* --- Agenti ------------------------------------------------------------ */
.sezione { margin: 1.5rem 0 .25rem; font-size: 1.05rem; }
.sezione + .sub { margin: 0 0 .75rem; }

.griglia-agenti {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.griglia-agenti .card { margin: 0; }
.agente .card-head h3 {
  margin: 0; font-size: .95rem; font-family: var(--mono, ui-monospace, monospace);
  display: inline-flex; align-items: center; gap: .5rem;
}
.agente p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.5; }

/* Il numero d'ordine rende leggibile la sequenza a colpo d'occhio: si vede
   che è una catena, non un elenco di ruoli indipendenti. */
.num-passo {
  display: inline-grid; place-items: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--accent-soft, #eef2ff); color: var(--accent, #4459c9);
  font-size: .75rem; font-weight: 600; font-family: inherit;
}

/* --- Anteprime del materiale ------------------------------------------- */
/* La miniatura è il file vero ridotto dal browser: nessuna anteprima da
   generare e da tenere allineata all'originale. */
.asset .art {
  display: block;
  aspect-ratio: 4 / 5;
  background-color: var(--bg-2, #eef1f4);
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.art:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }
.asset video.art { object-fit: cover; width: 100%; }

/* --- Galleria delle slide nell'editor ----------------------------------- */
.galleria {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.slide-anteprima {
  width: 100%;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--bg-2, #eef1f4);
  transition: transform .12s ease, box-shadow .12s ease;
}
a:hover > .slide-anteprima { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.15); }

/* --- Pannello sfondo ---------------------------------------------------- */
.sfondo-attuale {
  width: 108px; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 10px; border: 1px solid rgba(0,0,0,.10); display: block;
}

/* --- Pannello di avvio degli agenti ------------------------------------- */
.card.avvio .card-head h3 { font-size: .95rem; margin: 0; }
.card.avvio .card-body p { font-size: .88rem; line-height: 1.45; margin: 0 0 .7rem; }
.card.avvio button[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Prosa dei file markdown -------------------------------------------- */
.prosa h2 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.prosa h4, .prosa h5, .prosa h6 { font-size: .92rem; margin: .9rem 0 .3rem; }
.prosa p { margin: 0 0 .7rem; line-height: 1.6; }
.prosa ul, .prosa ol { margin: 0 0 .8rem 1.2rem; line-height: 1.6; }
.prosa li { margin-bottom: .25rem; }
.prosa blockquote {
  margin: 0 0 .9rem; padding: .6rem .9rem;
  border-left: 3px solid var(--accent, #1CBAC8);
  background: var(--bg-2, #f3f6f8); border-radius: 0 8px 8px 0;
}
.prosa code { font-size: .88em; padding: .1em .35em; border-radius: 4px; background: var(--bg-2, #eef1f4); }
.prosa hr { border: 0; border-top: 1px solid rgba(0,0,0,.10); margin: 1.2rem 0; }
.prosa table { font-size: .9rem; }

/* ---------------- lead e campagne ---------------- */

/* Filtri: schede a sinistra, ricerca a destra. Su schermo stretto vanno a capo
   invece di comprimersi, perché un campo di ricerca da 4rem non serve a nulla. */
.filtri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.tabs { display: flex; gap: .2rem; flex-wrap: wrap; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  border-radius: var(--r-pill);
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid transparent;
}
.tab:hover { background: rgba(255, 255, 255, .75); color: var(--ink); text-decoration: none; }
.tab[aria-current="true"] { background: var(--dark); color: #fff; }
.tab-n {
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  padding: .05rem .4rem;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 32, .07);
  color: var(--ink-2);
}
.tab[aria-current="true"] .tab-n { background: rgba(255, 255, 255, .2); color: #fff; }

.cerca { display: flex; gap: .4rem; align-items: center; }
.cerca input[type="search"] {
  min-width: 15rem;
  padding: .45rem .8rem;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}
.cerca input[type="search"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Il flag "gestito". Un quadrato che si riempie: si capisce a colpo d'occhio
   quali contatti restano da chiamare scorrendo la sola prima colonna. */
.cella-flag { width: 2.6rem; }
.flagbtn {
  width: 1.6rem; height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px solid var(--line-2);
  background: var(--card);
  cursor: pointer;
  padding: 0;
  transition: border-color .12s, background .12s;
}
.flagbtn:hover { border-color: var(--accent); }
.flagbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flagbtn .flagsegno {
  width: .62rem; height: .34rem;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}
.flagbtn.acceso { background: var(--good); border-color: var(--good); }
.flagbtn.acceso .flagsegno { border-color: #fff; }

.cella-flag { display: grid; gap: .35rem; justify-items: start; }
.giudizio { display: flex; gap: .25rem; }
.qualbtn { font-size: .8rem; line-height: 1; padding: 0; }
.qualbtn:not(.acceso) { filter: grayscale(1); opacity: .55; }
.qualbtn:not(.acceso):hover { filter: none; opacity: 1; }
.qualbtn.qual-buono.acceso { background: var(--good-soft, #dff3e6); border-color: var(--good); }
.qualbtn.qual-non-buono.acceso { background: var(--crit-soft); border-color: var(--crit); }
.tab-lead tr.qual-non-buono td:not(.cella-flag) { opacity: .7; }
.tab-lead tr.fatta td { opacity: .55; }
.tab-lead tr.fatta .cella-flag { opacity: 1; }
.tab-lead td { vertical-align: top; }
.nowrap { white-space: nowrap; }

/* Barre orizzontali: composizione della lista. */
.barra + .barra { margin-top: .7rem; }
.barra-testa {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  font-size: .85rem;
  margin-bottom: .25rem;
}
.barra-testa span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 32, .06);
  overflow: hidden;
}
.barra-pista > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.barra-pista.larga { height: 9px; }

/* Colonne verticali: andamento nel tempo. Scorrono in orizzontale se non
   ci stanno, invece di schiacciarsi a filo di capello. */
.colonne {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  height: 8.5rem;
  overflow-x: auto;
  padding-bottom: .2rem;
}
.colonne-fitte { gap: .18rem; height: 7rem; }
.colonna {
  flex: 1 0 1.4rem;
  min-width: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: .25rem;
}
.colonne-fitte .colonna { flex-basis: .9rem; min-width: .9rem; }
.colonna-n {
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  min-height: .9em;
  flex: none;
  /* «23,30» sopra e «€» sotto sembrava un dato diverso dagli altri:
     l'importo resta su una riga (il simbolo sta nella didascalia), e la
     colonna si allarga per contenerlo — il grafico scorre se non ci sta. */
  white-space: nowrap;
}
.colonne-fitte .colonna:has(.colonna-n:not(:empty)) { flex-basis: 2.4rem; min-width: 2.4rem; }
/* La pista prende tutta l'altezza che avanza e fa da riferimento alla barra.
   La barra è in posizione assoluta e non per vezzo: l'altezza in percentuale
   di un figlio in flusso non si risolve contro un contenitore la cui altezza
   arriva dal flex, e ogni barra collassava a min-height. Con position:absolute
   il riferimento è il box della pista, che a quel punto un'altezza ce l'ha. */
.colonna-pista {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.colonna-barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-radius: 5px 5px 2px 2px;
  background: var(--accent-soft);
  min-height: 3px;
}
.colonna-barra.con-lead { background: var(--accent); }
.colonna-k {
  flex: none;
  font-size: .66rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Confronto fra periodi: l'ultima riga è quella che conta di più, perché dice
   come sta andando adesso e non com'è andata in media da aprile. */
.tab-metriche td { font-variant-numeric: tabular-nums; }
.tab-metriche tr.evidenza td { background: var(--accent-tint); }
.tab-metriche tr.evidenza td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.tab-metriche tr.evidenza td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.riga-meta { padding-top: .2rem; }
.elenco-adset { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.elenco-adset li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 40rem) {
  .cerca { width: 100%; }
  .cerca input[type="search"] { min-width: 0; flex: 1; }
}

/* ---------------- proporzioni dei grafici ---------------- */

/* Le altezze e le larghezze delle barre non possono stare in uno style inline:
   la Content-Security-Policy della console non ammette stili inline, e il
   browser li scarta in silenzio — le barre risultavano tutte alte 3px senza
   un errore da nessuna parte. Qui ci sono le proporzioni pronte, a passi del
   2%: l'occhio non distingue di meglio su una barra alta sette rem, e la CSP
   resta stretta com'era.
   Le classi le calcolano classeAltezza() e classeLarghezza() in format.mjs. */
.h-0 { height: 0%; }
.h-2 { height: 2%; }
.h-4 { height: 4%; }
.h-6 { height: 6%; }
.h-8 { height: 8%; }
.h-10 { height: 10%; }
.h-12 { height: 12%; }
.h-14 { height: 14%; }
.h-16 { height: 16%; }
.h-18 { height: 18%; }
.h-20 { height: 20%; }
.h-22 { height: 22%; }
.h-24 { height: 24%; }
.h-26 { height: 26%; }
.h-28 { height: 28%; }
.h-30 { height: 30%; }
.h-32 { height: 32%; }
.h-34 { height: 34%; }
.h-36 { height: 36%; }
.h-38 { height: 38%; }
.h-40 { height: 40%; }
.h-42 { height: 42%; }
.h-44 { height: 44%; }
.h-46 { height: 46%; }
.h-48 { height: 48%; }
.h-50 { height: 50%; }
.h-52 { height: 52%; }
.h-54 { height: 54%; }
.h-56 { height: 56%; }
.h-58 { height: 58%; }
.h-60 { height: 60%; }
.h-62 { height: 62%; }
.h-64 { height: 64%; }
.h-66 { height: 66%; }
.h-68 { height: 68%; }
.h-70 { height: 70%; }
.h-72 { height: 72%; }
.h-74 { height: 74%; }
.h-76 { height: 76%; }
.h-78 { height: 78%; }
.h-80 { height: 80%; }
.h-82 { height: 82%; }
.h-84 { height: 84%; }
.h-86 { height: 86%; }
.h-88 { height: 88%; }
.h-90 { height: 90%; }
.h-92 { height: 92%; }
.h-94 { height: 94%; }
.h-96 { height: 96%; }
.h-98 { height: 98%; }
.h-100 { height: 100%; }
.w-0 { width: 0%; }
.w-2 { width: 2%; }
.w-4 { width: 4%; }
.w-6 { width: 6%; }
.w-8 { width: 8%; }
.w-10 { width: 10%; }
.w-12 { width: 12%; }
.w-14 { width: 14%; }
.w-16 { width: 16%; }
.w-18 { width: 18%; }
.w-20 { width: 20%; }
.w-22 { width: 22%; }
.w-24 { width: 24%; }
.w-26 { width: 26%; }
.w-28 { width: 28%; }
.w-30 { width: 30%; }
.w-32 { width: 32%; }
.w-34 { width: 34%; }
.w-36 { width: 36%; }
.w-38 { width: 38%; }
.w-40 { width: 40%; }
.w-42 { width: 42%; }
.w-44 { width: 44%; }
.w-46 { width: 46%; }
.w-48 { width: 48%; }
.w-50 { width: 50%; }
.w-52 { width: 52%; }
.w-54 { width: 54%; }
.w-56 { width: 56%; }
.w-58 { width: 58%; }
.w-60 { width: 60%; }
.w-62 { width: 62%; }
.w-64 { width: 64%; }
.w-66 { width: 66%; }
.w-68 { width: 68%; }
.w-70 { width: 70%; }
.w-72 { width: 72%; }
.w-74 { width: 74%; }
.w-76 { width: 76%; }
.w-78 { width: 78%; }
.w-80 { width: 80%; }
.w-82 { width: 82%; }
.w-84 { width: 84%; }
.w-86 { width: 86%; }
.w-88 { width: 88%; }
.w-90 { width: 90%; }
.w-92 { width: 92%; }
.w-94 { width: 94%; }
.w-96 { width: 96%; }
.w-98 { width: 98%; }
.w-100 { width: 100%; }

/* Sigle spiegate: il trattino punteggiato dice che c'è qualcosa da leggere. */
.aiuto { border-bottom: 1px dotted var(--ink-3); cursor: help; }
.aiuto abbr { text-decoration: none; }


/* Le risposte del modulo: la domanda sopra, piccola e smorzata; la risposta
   sotto, leggibile. Il solo valore sembrerebbe un'etichetta messa da noi —
   con la domanda davanti si capisce che l'ha scritto il contatto. */
.cella-risposte { min-width: 14rem; max-width: 26rem; }
.risposte { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.risposte dt {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
}
.risposte dd { margin: 0 0 .1rem; font-size: .88rem; color: var(--ink); }
.piccolissimo { font-size: .68rem; line-height: 1.35; margin-top: .15rem; }

/* ---------------- paginazione ---------------- */

.paginazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: .85rem;
}
.paginazione.sola { justify-content: flex-start; }
.pag-conteggio { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pag-controlli { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pag-numeri { display: flex; align-items: center; gap: .15rem; }

.pag-btn, .pag-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
}
.pag-btn { padding: .35rem .8rem; }
.pag-n { min-width: 1.9rem; padding: .35rem .5rem; font-variant-numeric: tabular-nums; }
.pag-btn:hover, .pag-n:hover { background: rgba(255, 255, 255, .8); color: var(--ink); text-decoration: none; }
.pag-n.corrente { background: var(--dark); color: #fff; }
/* Il salto che non si può fare resta al suo posto invece di sparire: se i
   controlli si spostassero sotto il dito, il clic successivo finirebbe altrove. */
.pag-btn.spento { padding: .35rem .8rem; color: var(--ink-3); opacity: .45; }
.pag-stacco { color: var(--ink-3); padding: 0 .15rem; }

@media (max-width: 40rem) {
  .paginazione { justify-content: center; }
  .pag-controlli { width: 100%; justify-content: center; }
}

/* ---------------- fonti ---------------- */

/* Un URL lungo in una cella stretta non deve allargare la tabella. */
.spezza { overflow-wrap: anywhere; }

/* Riga con più campi e un pulsante: va a capo invece di comprimersi. */
.riga-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.riga-form input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .5rem .85rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}
.riga-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Cosa è arrivato dalle fonti: sola lettura, righe compatte. */
.tab-voci td { vertical-align: top; }
.tab-voci a { color: inherit; text-decoration: none; font-weight: 500; }
.tab-voci a:hover { color: var(--accent-deep); text-decoration: underline; }

/* Le miniature sono <img> veri: la CSP vieta gli stili inline, e uno sfondo
   CSS impostato dall'HTML verrebbe scartato lasciando un riquadro vuoto. */
.asset .art { position: relative; overflow: hidden; }
.asset .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset .art.vuota { background: rgba(15, 23, 32, .04); }
.asset .meta { gap: .15rem; }

/* Le date sotto il grafico invece che dentro le colonne: un'etichetta è più
   larga della colonna che descrive, e messa lì dentro allargava il grafico
   costringendolo a scorrere in orizzontale. */
.colonne.senza-etichette { height: 6rem; overflow: visible; }
.asse {
  display: flex;
  justify-content: space-between;
  font-size: .66rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: .3rem;
  padding-top: .3rem;
  border-top: 1px solid var(--line);
}

/* Scartare è un'azione secondaria: sta chiusa finché non serve, così il
   pulsante primario resta quello dell'approvazione. */
.scarta > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--ink-2);
  padding: .35rem 0;
  list-style: none;
}
.scarta > summary::-webkit-details-marker { display: none; }
.scarta > summary::before { content: "▸ "; color: var(--ink-3); }
.scarta[open] > summary::before { content: "▾ "; }
.scarta > summary:hover { color: var(--crit); }
.scarta textarea {
  width: 100%;
  padding: .6rem .8rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  resize: vertical;
}
.scarta textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Il materiale che non appartiene a un post in lavorazione: sta da parte,
   ma non sparisce — nasconderlo senza dirlo farebbe perdere i file caricati
   per un post che non esiste ancora. */
.archivio { margin-top: var(--sp-4); }
.archivio > summary {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: .5rem 0;
  list-style: none;
}
.archivio > summary::-webkit-details-marker { display: none; }
.archivio > summary::before { content: "▸ "; color: var(--ink-3); }
.archivio[open] > summary::before { content: "▾ "; }
.archivio > summary:hover { color: var(--ink); }
.archivio > p { margin: 0 0 var(--sp-3); }

/* Il marchio di 2B al posto del quadrato segnaposto. È già forte in piccolo:
   non serviva inventarne un altro per la console. */
.brand .marchio { width: 26px; height: 26px; object-fit: contain; flex: none; display: block; }

/* ---------------- community ---------------- */

.commento {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.commento.valutato { opacity: .6; }
.commento-testa { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.commento-testo {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  /* Il testo lo scrive un estraneo: può essere lunghissimo o senza spazi. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.commento-azioni { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.commento-azioni select {
  padding: .32rem .6rem;
  font: inherit;
  font-size: .82rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}

/* ---------------- anteprime per rete ---------------- */

/* Affiancate, non una sotto l'altra: le due reti ricevono immagini e testi
   diversi, e finché non si vedono accanto è impossibile giudicarli. */
.anteprime {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.anteprima {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.anteprima.spenta { background: rgba(15, 23, 32, .03); box-shadow: none; }
.anteprima-testa { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Il carosello scorre in orizzontale, come scorrerà nel feed. */
.anteprima-foto { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; }
.anteprima-foto a { position: relative; flex: none; display: block; }
.anteprima-foto img {
  display: block;
  width: 11rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(15, 23, 32, .04);
}
.anteprima-foto:not(.carosello) img { width: 100%; max-width: 20rem; }
.anteprima-n {
  position: absolute; bottom: .35rem; right: .35rem;
  font-size: .64rem;
  padding: .1rem .35rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55);
  color: #fff;
}
.anteprima-testo {
  font-size: .88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 16rem;
  overflow-y: auto;
}
.anteprima-link {
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(15, 23, 32, .03);
  overflow-wrap: anywhere;
}

/* I pannelli di modifica stanno chiusi: la pagina serve a giudicare il post,
   non a ritoccarlo. Chi deve ritoccare apre. */
.pannello > summary {
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  list-style: none;
}
.pannello > summary::-webkit-details-marker { display: none; }
.pannello > summary::before { content: "▸ "; color: var(--ink-3); }
.pannello[open] > summary::before { content: "▾ "; }
.pannello > summary:hover { border-color: var(--line-2); color: var(--ink); }
.pannello[open] > summary { margin-bottom: var(--sp-2); }

/* La bacheca era un muro di testo: i post si distinguevano solo leggendoli.
   Ora ogni scheda mostra la copertina, il titolo e su quali reti esce. */
.postcard { display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; }

/* La copertina nel SUO formato, 4:5, senza ritagli: è così che uscirà, ed è
   l'unico modo di giudicarla dalla bacheca. Ritagliandola a 16:9 si tagliava
   proprio la parte con il titolo. */
.postcard-cop { position: relative; display: block; }
.postcard-cop img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(15, 23, 32, .05);
}
.postcard-slide {
  position: absolute; top: .5rem; right: .5rem;
  font-size: .68rem; font-weight: 500;
  padding: .12rem .5rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55);
  color: #fff;
}
.postcard-senza-cop {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem .9rem;
  border-bottom: 1px solid var(--line);
}
.postcard-titolo {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.postcard-corpo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
  padding: .65rem .8rem;
}
.postcard-reti { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }

/* Le uscite di Oggi: miniatura nel suo 4:5, titolo, orario e reti. Stessa
   grammatica della bacheca Post, formato riga. */
.row.uscita { text-decoration: none; color: inherit; align-items: center; }
.row.uscita:hover { background: rgba(15, 23, 32, .03); text-decoration: none; }
.uscita-cop {
  position: relative; flex: none;
  width: 3rem; aspect-ratio: 4 / 5;
  border-radius: 6px; overflow: hidden;
  background: rgba(15, 23, 32, .06);
}
.uscita-cop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uscita-slide {
  position: absolute; right: .2rem; bottom: .2rem;
  font-size: .62rem; font-weight: 500; line-height: 1;
  padding: .15rem .35rem; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55); color: #fff;
}
.uscita-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.uscita-titolo {
  font-size: .9rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.uscita-meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.row.uscita .t { width: auto; }

/* Moduli lunghi: campi con etichetta sopra, respiro fra uno e l'altro. */
.field { display: flex; flex-direction: column; gap: .3rem; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend { font-size: .85rem; font-weight: 500; color: var(--ink-2); padding: 0; }
.field select, .field textarea, .field input[type="number"], .field input[type="text"], .field input[type="password"], .field input[type="datetime-local"] {
  padding: .55rem .8rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  width: 100%;
  max-width: 40rem;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select:focus-visible, .field textarea:focus-visible, .field input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.field p { margin: 0; }
.scelta { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; margin-right: 1rem; }

/* Le affermazioni in attesa di verifica umana: una citazione per riga marcata,
   col bottone che la scioglie. */
.verifica { padding: 10px 0; border-top: 1px solid var(--bordo, #2a2f3a); }
.verifica:first-of-type { border-top: 0; }
.verifica blockquote { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--accento, #1CBAC8); font-size: .92rem; }

/* Accesso: una pagina sola, una password sola. */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: min(360px, 90vw); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { font-size: 1.3rem; margin: 0; }
.login-card .login-errore { margin: 0; color: var(--crit); font-weight: 500; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.login-card input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bordo, #2a2f3a); background: transparent; color: inherit; }
.nav-esci { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; }
.nav-chi { font-size: .78rem; color: var(--ink-3); font-family: 'IBM Plex Mono', monospace; }
.navitem.esci { background: none; border: 0; cursor: pointer; font: inherit; opacity: .7; }
.navitem.esci:hover { opacity: 1; }
/* Il cliente corrente, accanto al marchio: visibile solo a chi ne ha più d'uno. */
.selettore-cliente { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.selettore-cliente label { color: var(--ink-3); }
.selettore-cliente select { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--bordo, #2a2f3a); background: transparent; color: inherit; font: inherit; }

/* La decisione sul post: le due strade vere — approva / scarta — affiancate e
   con lo stesso peso visivo di bottone; l'eliminazione resta una riga piccola
   in fondo. Il "Scarta" è un details perché il motivo si apre sotto senza JS. */
.decisione-scelte { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.decisione-scelte > form { margin: 0; }
.decisione-guida { margin: 0; }
.scarta-btn { min-width: 0; }
.scarta-btn > summary {
  font-size: .85rem;
  font-weight: 500;
  padding: .48rem .95rem;
  border: 1px solid rgba(176, 32, 44, .3);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--crit);
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .12s ease, background .15s ease;
}
.scarta-btn > summary::before { content: none; }
.scarta-btn[open] > summary::before { content: none; }
.scarta-btn > summary:hover { background: var(--crit-soft); transform: translateY(-1px); }
.scarta-btn[open] > summary { background: var(--crit-soft); }
.scarta-btn[open] { flex-basis: 100%; }
.scarta-btn > form { margin-top: .6rem; }
/* «Pubblica subito»: stesso meccanismo dello scarto, ma non è un gesto
   negativo — niente rosso, il colore dell'azione. */
.subito-btn > summary:hover { color: var(--accent); background: var(--accent-soft, rgba(0, 0, 0, .04)); }
.subito-btn[open] > summary { color: var(--accent); background: var(--accent-soft, rgba(0, 0, 0, .04)); }
.decisione-terziaria > summary { font-size: .78rem; color: var(--ink-3); }

/* Annunci di una campagna: un elenco con nome ed etichetta di stato, non una
   riga di nomi in monospazio. I fermi stanno ripiegati. */
.annunci { margin-top: var(--sp-3); }
.lista-annunci { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .25rem; }
.annuncio-riga { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); font-size: .85rem; }
.annuncio-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Proposte da valutare: card, titolo e testo per esteso — si giudica quello
   che si vede, non un contatore di annunci. */
.proposta { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); padding: .85rem 1rem; display: grid; gap: .75rem; }
.proposta-testa { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; align-items: center; }
.proposta-annuncio { display: grid; grid-template-columns: 160px 1fr; gap: .9rem; align-items: start; }
.proposta-img { width: 160px; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; }
.proposta-img-vuota { display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem; background: rgba(15, 23, 32, .04); }
.proposta-titolo { font-weight: 600; margin: .15rem 0 .3rem; }
.proposta-testo { margin: 0; font-size: .9rem; white-space: normal; }
@media (max-width: 640px) {
  .proposta-annuncio { grid-template-columns: 1fr; }
  .proposta-img { width: 100%; }
}
.proposta-perche { border-left: 3px solid var(--accent); padding: .35rem .8rem; background: rgba(28, 186, 200, .06); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.proposta-perche p { margin: .15rem 0; }
.proposta-perche-vuota { border-left-color: var(--line-2); background: rgba(15, 23, 32, .03); }
.proposta-img-vuota { flex-direction: column; gap: .35rem; word-break: break-all; }
.scelta-reti { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .8rem; display: grid; gap: .3rem; }
.scelta-reti legend { font-size: .85rem; padding: 0 .3rem; }
.scelta-reti label.inline { gap: .45rem; font-size: .9rem; }

/* Lightbox: GLightbox (glightbox.min.css). Qui solo il compensatore della
   barra di scorrimento, che la libreria vorrebbe iniettare inline e la CSP blocca. */
.gscrollbar-fixer { margin-right: 0; }
.slot-uscita { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .8rem; background: var(--card); display: grid; gap: .25rem; }
.slot-uscita.slot-passata { border-color: rgba(176, 32, 44, .4); background: var(--crit-soft); }
.slot-uscita input[type=datetime-local] { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); }

/* Il percorso: di chi è la pagina (Agenzia › Cliente). */
.percorso { display: flex; gap: .5rem; align-items: center; padding: .6rem 1.5rem 0; font-size: .9rem; color: var(--ink-2); flex-wrap: wrap; }
.percorso a { color: inherit; }
.percorso b { color: var(--ink); font-weight: 600; }

/* La home di piattaforma: una scheda per cliente, raggruppate per agenzia. */
.griglia-clienti { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.sintesi { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.gruppo-head { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }

/* Le schede di Impostazioni: Brand, Istruzioni, Meta, Moduli, Uscita. */
.schede { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); margin-bottom: 1rem; }
.schede a { padding: .4rem .8rem; text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; }
.schede a[aria-current="page"] { color: var(--ink); border-bottom-color: currentColor; font-weight: 600; }