/* MEDIANApp — componenti.
   I token stanno in tokens.css: qui nessun colore letterale, solo var().
   Riferimento: /root/develop/MEDIANA_DESIGN.md */

* { box-sizing: border-box; }
/* ⚠️ Deve stare PRIMA di tutto e vincere su tutto: qualunque componente con un
   `display` esplicito (i bottoni tondi sono `display:grid`) ignora l'attributo
   `hidden`, e ci si ritrova con elementi nascosti che restano in pagina. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.tabular { font-variant-numeric: tabular-nums; }
.sp { flex: 1; }
.rule { font-size: var(--text-sm); color: var(--color-text-secondary); }
.eyebrow {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent);
}

/* ------------------------------------------------------- strato chrome ---
   Unica superficie di vetro della vista: il budget dice massimo due, e la
   seconda la spendiamo nei toast. */
.layer-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid var(--glass-border);
}
.chrome-row {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.chrome-row b { font-size: var(--text-md); font-weight: 600; }
.brand-mark { width: 24px; height: 24px; color: var(--color-accent); flex: none; }
.icon-btn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-text-primary);
  cursor: pointer; padding: 0;
  transition: background var(--motion-micro) var(--ease-out), transform var(--motion-micro) var(--ease-out);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--color-accent-subtle); }
.icon-btn:active { transform: scale(.94); }

.layer-content.has-chrome { padding-top: 66px; }
.wrap {
  max-width: 900px; margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-16) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-6);
}

/* ------------------------------------------------------------- card ---- */
.card {
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.card h3 { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-2); }

/* ------------------------------------------------------------- bento ---- */
.bento { display: grid; gap: var(--space-3); grid-template-columns: repeat(4, 1fr); }
.bento > * {
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.b-wide { grid-column: span 2; }
@media (max-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-wide { grid-column: 1 / -1; }
}

/* Card in evidenza. Selettore `.bento > .b-hero` e non `.b-hero`: a parita'
   di specificita' `.bento > *` vincerebbe (viene dopo) e rimetterebbe la
   superficie chiara sotto il testo bianco. */
.bento > .b-hero {
  position: relative; overflow: hidden; color: #FFFFFF; border-color: transparent;
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-700) 100%);
  box-shadow: var(--shadow-2);
}
.b-hero .wm {
  position: absolute; right: -30px; top: -38px; width: 196px; height: 196px;
  color: #FFFFFF; opacity: .17; pointer-events: none;
}
.b-hero-row { position: relative; display: flex; align-items: center; gap: var(--space-4); }
.b-hero-tile {
  width: 60px; height: 60px; flex: none; border-radius: var(--radius-md);
  background: rgba(255,255,255,.2); display: grid; place-items: center;
}
.b-hero .kpi-note { color: rgba(255,255,255,.75); }
.b-hero .lbl { font-weight: 600; margin-top: 2px; }

/* KPI: riga di accento = "da notare". Il fondo pieno resta per "da fare". */
.kpi { position: relative; overflow: hidden; }
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--kpi-line, transparent);
}
.kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2); }
.kpi-ico {
  width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--tint-bg, var(--color-surface-2)); color: var(--tint-fg, var(--color-text-secondary));
}
.kpi-ico svg { width: 16px; height: 16px; }
.kpi-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted); font-weight: 600;
}
.kpi-value { font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
.kpi-note { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 4px; }
.kpi.hl-green { --kpi-line: var(--h-green-fg); --tint-bg: var(--h-green-bg); --tint-fg: var(--h-green-fg); }
.kpi.hl-amber { --kpi-line: var(--h-amber-fg); --tint-bg: var(--h-amber-bg); --tint-fg: var(--h-amber-fg); }
.kpi.hl-red   { --kpi-line: var(--h-red-fg);   --tint-bg: var(--h-red-bg);   --tint-fg: var(--h-red-fg); }
.kpi.hl-blue  { --kpi-line: var(--h-blue-fg);  --tint-bg: var(--h-blue-bg);  --tint-fg: var(--h-blue-fg); }

/* ------------------------------------------------------------- badge ---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--chip-bg, var(--color-surface-2));
  color: var(--chip-fg, var(--color-text-secondary));
}
.chip svg { width: 13px; height: 13px; flex: none; }
.chip.blue   { --chip-bg: var(--h-blue-bg);   --chip-fg: var(--h-blue-fg); }
.chip.violet { --chip-bg: var(--h-violet-bg); --chip-fg: var(--h-violet-fg); }
.chip.green  { --chip-bg: var(--h-green-bg);  --chip-fg: var(--h-green-fg); }
.chip.amber  { --chip-bg: var(--h-amber-bg);  --chip-fg: var(--h-amber-fg); }
.chip.red    { --chip-bg: var(--h-red-bg);    --chip-fg: var(--h-red-fg); }
.chip.sm { font-size: 11px; padding: 2px 8px; gap: 4px; }
.chip.sm svg { width: 11px; height: 11px; }

/* -------------------------------------------------------- lista righe --- */
.lista-testata { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.lista-testata h2 { font-size: var(--text-lg); font-weight: 600; }
.plist { display: flex; flex-direction: column; gap: var(--space-2); }
.prow {
  display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  transition: border-color var(--motion-micro) var(--ease-out), transform var(--motion-micro) var(--ease-out);
}
.prow:hover { border-color: var(--color-accent); }
.prow:active { transform: scale(.995); }
.prow-main { flex: 1; min-width: 180px; }
.prow-main b { display: block; font-size: var(--text-sm); font-weight: 600; }
.prow-main span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------------------------------------------------- card notifiche ---- */
.push-card { position: relative; overflow: hidden; }
.push-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.push-testo { flex: 1; min-width: 200px; }
.push-testo h3 { margin-bottom: 2px; }
.push-testo p { font-size: var(--text-sm); color: var(--color-text-secondary); }
.state-tile {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--color-accent-subtle); color: var(--color-accent);
}
.state-tile.sm { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.push-ios { margin-top: var(--space-3); }

/* ------------------------------------------------- barra di aggiornamento
   In basso e non in cima: e' una proposta, non un allarme, e in cima
   coprirebbe la testata. Terza superficie di vetro, ma appare di rado. */
.barra-agg {
  position: fixed; z-index: 60;
  left: var(--space-3); right: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  /* Pieno e non di vetro: il budget del vetro e' due superfici per vista, e
     sono gia' prese dalla testata e dai toast. */
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-700) 100%);
  border: 1px solid transparent; box-shadow: var(--shadow-3);
  animation: sale var(--motion-enter) var(--ease-out);
}
.barra-agg-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-agg-testo b { font-size: var(--text-sm); font-weight: 600; }
.barra-agg-testo .rule { font-size: var(--text-xs); }
.barra-agg .btn { flex: none; }
/* Stati della card: pieno = c'e' qualcosa da fare, neutro = tutto a posto. */
.sc-info {
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-700) 100%);
  border-color: transparent;
}
.sc-ok .state-tile { background: var(--h-green-bg); color: var(--h-green-fg); }
.on-color { color: #FFFFFF; }
.on-color .push-testo p, .on-color .rule { color: rgba(255,255,255,.82); }
.on-color .state-tile { background: rgba(255,255,255,.22); color: #FFFFFF; }
.on-color .rule strong, .on-color em { color: #FFFFFF; }

/* -------------------------------------------------------- stato vuoto --- */
.stato-vuoto {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center; padding: var(--space-12) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-1);
}
.empty-mark { width: 84px; height: 84px; color: var(--color-text-primary); opacity: .14; }

/* ------------------------------------------------------------ bottoni --- */
.btn {
  font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
  transition: background var(--motion-micro) var(--ease-out), transform var(--motion-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn.block { width: 100%; padding: var(--space-3); font-size: var(--text-md); }
.on-color .btn { background: rgba(255,255,255,.22); border-color: transparent; color: #FFFFFF; }

/* ------------------------------------------------------------- login ---- */
.login-wrap {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--space-6) var(--space-4);
}
.login-card {
  position: relative; overflow: hidden; width: 100%; max-width: 380px;
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-2);
}
/* Marchio pieno, compatto: una piastrella con la M, non un logo su fondo
   bianco. Vive bene in tutti e due i temi perche' e' disegnata coi token. */
.login-mark {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  border-radius: 18px; margin-bottom: var(--space-3);
  background: linear-gradient(150deg, var(--color-accent-hover), var(--color-accent));
  box-shadow: var(--shadow-2);
}
.login-mark svg { width: 38px; height: 38px; fill: var(--color-on-accent); }
.login-card h1 { font-size: var(--text-xl); font-weight: 700; }
.login-card .marchio {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.login-card .marchio span { font-weight: 500; letter-spacing: .06em; color: var(--color-text-muted); }
.login-card .sub {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.login-card label {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary);
  margin-top: var(--space-2);
}
.login-card input {
  font: inherit; font-size: var(--text-md);
  padding: var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text-primary); width: 100%;
}
.login-card input:focus { border-color: var(--color-accent); }
.login-card .btn { margin-top: var(--space-4); }

.avviso {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-sm); padding: var(--space-3);
  border-radius: var(--radius-sm); margin-bottom: var(--space-2);
}
.avviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.avviso.danger { background: var(--h-red-bg); color: var(--h-red-fg); }

/* ------------------------------------------------------------- toast ---- */
.layer-overlay {
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  pointer-events: none; padding: 0 var(--space-4);
}
.toast {
  max-width: 460px; width: 100%;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--glass-border); font-size: var(--text-sm); font-weight: 500;
  box-shadow: var(--shadow-2);
  animation: sale var(--motion-enter) var(--ease-out);
}
.toast.ok { color: var(--h-green-fg); }
.toast.danger { color: var(--h-red-fg); }
.toast.via { opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
@keyframes sale { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Aggiunte: navigazione, priorita', dettaglio, tabelle, regole
   ========================================================================= */

.brand-logo { flex: none; opacity: .95; }
.chrome-nav {
  max-width: 900px; margin: 0 auto; display: flex; gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-2);
}
.nav-voce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary);
  transition: background var(--motion-micro) var(--ease-out);
}
.nav-voce svg { width: 15px; height: 15px; }
.nav-voce:hover { background: var(--color-accent-subtle); }
.nav-voce.on { background: var(--color-accent-subtle); color: var(--color-accent); font-weight: 600; }
.layer-content.has-chrome { padding-top: 106px; }

/* --------------------------------------------------------------- schede -- */
.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface-1);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary);
}
.tab.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.tab-n {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--color-text-secondary);
}
.tab.on .tab-n { background: rgba(255,255,255,.25); color: #FFFFFF; }

/* ------------------------------------------------------------ priorita' --
   Il colore dice quanto in fretta guardare, non quanto vale il progetto. */
.prio-bar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
}
.prio-cell {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  border-left: 4px solid var(--prio-tinta, var(--color-border));
}
.prio-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--prio-tinta); flex: none; }
.prio-n { font-size: var(--text-lg); font-weight: 700; }
.prio-et { font-size: var(--text-xs); color: var(--color-text-secondary); }
.prio-alta  { --prio-tinta: var(--h-red-fg); }
.prio-media { --prio-tinta: var(--h-amber-fg); }
.prio-bassa { --prio-tinta: var(--h-green-fg); }

/* --------------------------------------------------------- riga progetto */
.prow { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.prow.prio-alta, .prow.prio-media, .prow.prio-bassa { border-left: 4px solid var(--prio-tinta); }
.prow-link { display: flex; flex-direction: column; gap: 6px; }
.prow-alto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prow-titolo { font-size: var(--text-sm); font-weight: 600; }
.prow-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.prow-azioni { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mini {
  font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  padding: 5px var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text-primary);
  transition: all var(--motion-micro) var(--ease-out);
}
.mini:hover { border-color: var(--color-accent); }
.mini.ghost { background: transparent; color: var(--color-text-secondary); }
.mini.ok { background: var(--h-green-bg); color: var(--h-green-fg); border-color: transparent; }
.mini.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.mini[disabled] { opacity: .5; cursor: default; }

/* -------------------------------------------------------------- dettaglio */
.indietro {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.indietro svg { width: 16px; height: 16px; }
.det-testata {
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  border-left: 4px solid var(--prio-tinta, var(--color-border));
  display: flex; flex-direction: column; gap: var(--space-2);
}
.det-testata h1 { font-size: var(--text-xl); font-weight: 700; }
.det-badge { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------- storia del progetto ---
   Gli aggiornamenti della piattaforma in ordine di tempo: la riga verticale
   li tiene insieme come una conversazione, non come un elenco di righe. */
.storia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.storia-voce { display: flex; gap: var(--space-3); position: relative; }
.storia-voce:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: calc(-1 * var(--space-4));
  width: 2px; background: var(--color-border);
}
.storia-ico {
  width: 28px; height: 28px; flex: none; border-radius: 50%; padding: 0;
  display: grid; place-items: center; position: relative; z-index: 1;
}
.storia-ico svg { width: 14px; height: 14px; }
.storia-corpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.storia-corpo b { font-size: var(--text-sm); font-weight: 600; }
.storia-testo {
  font-size: var(--text-sm); margin-top: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-sm);
  background: var(--color-surface-2); border-left: 3px solid var(--color-accent);
}
.det-fatti { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-secondary); }
.det-fatti span::before { content: "· "; color: var(--color-text-muted); }
.det-fatti span:first-child::before { content: ""; }
.abstract { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.65; }
.det-azioni { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.det-azioni .btn { display: inline-flex; align-items: center; gap: 8px; }
.det-azioni .btn svg { width: 16px; height: 16px; }
.btn.ghost { background: transparent; color: var(--color-accent); border-color: var(--color-border); }
.btn.ghost:hover { background: var(--color-accent-subtle); border-color: var(--color-accent); }
.stati-riga { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.campi { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 6px var(--space-3); margin: 0; font-size: var(--text-sm); }
.campi dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.campi dd { margin: 0; color: var(--color-text-secondary); }

/* --------------------------------------------------------------- tabelle */
.tabella-scroll { overflow-x: auto; margin-top: var(--space-3); }
.tab-scroll, table.tab { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.tab th, table.tab td { padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap; }
table.tab th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); font-weight: 600; border-bottom: 1px solid var(--color-border);
}
table.tab tbody tr { border-bottom: 1px solid var(--color-border); }
table.tab tbody tr:nth-child(even) { background: var(--color-surface-2); }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; margin-top: var(--space-3); }
.bars div { flex: 1; background: var(--color-accent); border-radius: 3px 3px 0 0; min-height: 3px; opacity: .85; }
.bars-x { display: flex; gap: 5px; margin-top: 5px; font-size: 10px; color: var(--color-text-muted); }
.bars-x span { flex: 1; text-align: center; }

/* ---------------------------------------------------------------- regole */
.regola { display: flex; flex-direction: column; gap: var(--space-4); }
.regola-testata { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.regola .nome {
  font: inherit; font-size: var(--text-md); font-weight: 600; flex: 1; min-width: 180px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text-primary);
}
.regola fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.regola legend {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted); font-weight: 600; padding: 0; margin-bottom: var(--space-1);
}
.regola label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--color-text-secondary); }
.regola input[type="text"], .regola input:not([type]), .regola input[type="number"] {
  font: inherit; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text-primary);
}
.regola .aiuto { font-size: var(--text-xs); color: var(--color-text-muted); }
.scelte { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.scelta, .interruttore { flex-direction: row !important; align-items: center; gap: 8px; font-size: var(--text-sm) !important; }
.soglie { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.regola-piede { display: flex; gap: var(--space-2); }
.avviso.ok { background: var(--h-green-bg); color: var(--h-green-fg); }
.avviso.warn { background: var(--h-amber-bg); color: var(--h-amber-fg); }
.avviso[hidden] { display: none; }

/* ----------------------------------------------------------------- login */
img.empty-mark { width: 120px; height: auto; opacity: .18; }
.b-hero img.wm {
  position: absolute; right: -26px; top: -26px; width: 190px; height: auto;
  opacity: .20; pointer-events: none;
}

/* Un dato che non si puo' sapere si dichiara, non si finge: niente zeri
   al posto di un'informazione mancante. */
.ignoto { color: var(--color-text-muted); font-style: italic; font-size: var(--text-xs); }

/* =========================================================================
   Due assi: urgenza (quando) e importanza (quanto vale). Non vanno fusi.
   ========================================================================= */

/* --------------------------------------------------------- filtri in cima
   Griglia, non accapo automatico: le celle hanno tutte la stessa larghezza e
   le righe restano piene. Il numero sta sopra, l'etichetta sotto: cosi' la
   larghezza della cella non dipende da quanto e' lunga la parola. */
.filtri { display: grid; gap: var(--space-2); }
.filtri-riga { display: grid; gap: var(--space-2); }
.filtri-riga.tre { grid-template-columns: repeat(3, 1fr); }
.filtri-riga.due { grid-template-columns: repeat(2, 1fr); }
.filtro {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  border-left: 4px solid var(--urg-tinta, var(--color-border));
  transition: border-color var(--motion-micro) var(--ease-out),
              background var(--motion-micro) var(--ease-out);
}
.filtro:hover { background: var(--color-surface-2); }
.filtro.on { border-color: var(--color-accent); border-left-color: var(--urg-tinta, var(--color-accent)); background: var(--color-accent-subtle); }
.f-testa { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.filtro .pallino { width: 9px; height: 9px; border-radius: 50%; background: var(--urg-tinta); flex: none; }
.filtro .stella { width: 14px; height: 14px; color: var(--h-green-fg); flex: none; }
.f-n { font-size: var(--text-lg); font-weight: 700; line-height: 1; }
/* Due righe, non i puntini di sospensione: "Di questi gi…" non dice niente.
   L'altezza e' riservata comunque, cosi' le celle restano allineate. */
.f-et {
  font-size: 11px; line-height: 1.25; color: var(--color-text-secondary);
  max-width: 100%; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.filtro.azzera {
  flex-direction: row; align-items: center;
  border-left-color: var(--color-border); font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
/* Da tablet in su le due righe stanno affiancate: cinque celle in linea. */
@media (min-width: 720px) {
  .filtri { grid-template-columns: 3fr 2fr; }
  .filtri .azzera { grid-column: 1 / -1; }
}
.f-nuovi  { --urg-tinta: var(--h-blue-fg); }
.f-subito { --urg-tinta: var(--h-red-fg); }
.f-oggi   { --urg-tinta: var(--h-amber-fg); }
.f-calma  { --urg-tinta: var(--h-green-fg); }
.f-valore { --urg-tinta: var(--h-green-fg); }

/* ------------------------------------------------------- riga: due segnali
   Il bordo sinistro e' l'URGENZA (quando). L'importanza vive nei badge, cosi'
   un progetto puo' essere "appena uscito" senza per questo sembrare prezioso. */
.urg-subito { --urg-tinta: var(--h-red-fg); }
.urg-oggi   { --urg-tinta: var(--h-amber-fg); }
.urg-calma  { --urg-tinta: var(--h-green-fg); }
.prow.urg-subito, .prow.urg-oggi, .prow.urg-calma,
.det-testata.urg-subito, .det-testata.urg-oggi, .det-testata.urg-calma {
  border-left: 4px solid var(--urg-tinta);
}
.quando { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Letto / non letto, come nella posta: il grassetto e il pallino. */
.pallino-letto { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: none; }
.non-letto .pallino-letto { background: var(--color-accent); }
.non-letto .prow-titolo { font-weight: 700; }
.non-letto .quando { color: var(--color-accent); font-weight: 600; }
.prow:not(.non-letto) .prow-titolo { font-weight: 500; color: var(--color-text-secondary); }

/* ------------------------------------------------- scorrimento per scartare
   Il gesto e' distruttivo: sotto compare cosa sta per succedere, e dopo resta
   sempre un "Annulla". Senza rete di sicurezza un tocco storto perde un lavoro. */
.prow { position: relative; overflow: hidden; padding: 0; }
.prow-corpo {
  position: relative; z-index: 1; background: var(--color-surface-1);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);
  touch-action: pan-y;
}
.prow-sfondo {
  position: absolute; inset: 0; z-index: 0; display: flex;
  align-items: center; justify-content: flex-end; padding: 0 var(--space-4);
  background: var(--h-red-bg); color: var(--h-red-fg);
  font-size: var(--text-sm); font-weight: 600;
}
.prow.scorre .prow-corpo { transition: none; }
.prow-corpo.torna { transition: transform var(--motion-base) var(--ease-out); }
.toast-azione {
  font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  background: none; border: 0; padding: 0 0 0 var(--space-3);
  color: inherit; text-decoration: underline;
}
.toast { display: flex; align-items: center; gap: var(--space-2); pointer-events: auto; }
.toast span { flex: 1; }

/* ------------------------------------------------- menu degli stati ------
   Il bottone a puntini e' sempre visibile: la pressione prolungata da sola
   sarebbe invisibile a chi non la conosce, e su desktop non esiste. */
.prow-corpo { flex-direction: row; align-items: center; }
.prow-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.punti {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--color-text-muted);
  border-radius: var(--radius-pill); cursor: pointer; padding: 0;
  transition: background var(--motion-micro) var(--ease-out), color var(--motion-micro) var(--ease-out);
}
.punti svg { width: 18px; height: 18px; }
.punti:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.prow.pressione .prow-corpo { background: var(--color-surface-2); }

/* Foglio dal basso: seconda e ultima superficie di vetro della vista. */
.foglio-fondo { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; }
.foglio-fondo[hidden] { display: none; }
.foglio-velo { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: velo var(--motion-base) var(--ease-out); }
.foglio {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--glass-border); border-bottom: 0;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-3);
  animation: sale-foglio var(--motion-enter) var(--ease-out);
}
.foglio::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass-scrim); border-radius: inherit; pointer-events: none;
}
.foglio-presa { width: 42px; height: 4px; border-radius: 999px; background: var(--color-border); margin: 0 auto var(--space-2); }
.foglio-titolo {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary);
  padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foglio-voci { display: flex; flex-direction: column; gap: 2px; }
.voce-stato {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-3); border-radius: var(--radius-sm);
  border: 0; background: transparent; color: var(--color-text-primary);
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--motion-micro) var(--ease-out);
}
.voce-stato:hover { background: var(--color-surface-2); }
.voce-stato:active { transform: scale(.995); }
.voce-ico {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--tinta-bg, var(--color-surface-2)); color: var(--tinta-fg, var(--color-text-secondary));
}
.voce-ico svg { width: 17px; height: 17px; }
.voce-stato.t-green  { --tinta-bg: var(--h-green-bg);  --tinta-fg: var(--h-green-fg); }
.voce-stato.t-amber  { --tinta-bg: var(--h-amber-bg);  --tinta-fg: var(--h-amber-fg); }
.voce-stato.t-red    { --tinta-bg: var(--h-red-bg);    --tinta-fg: var(--h-red-fg); }
.voce-stato.t-blue   { --tinta-bg: var(--h-blue-bg);   --tinta-fg: var(--h-blue-fg); }
.voce-testo b { display: block; font-size: var(--text-sm); font-weight: 600; }
.voce-testo span { font-size: var(--text-xs); color: var(--color-text-muted); }
.foglio-nota { padding: 0 var(--space-2); }
@keyframes velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes sale-foglio { from { transform: translateY(100%); } to { transform: none; } }