/* ============================================================
   Stili delle pagine: solo ciò che è proprio di una pagina.
   Tutto il resto sta nei componenti.
   ============================================================ */

/* --- Oggi ---------------------------------------------------------------- */
.numeri-riga { display: inline-flex; flex-wrap: wrap; gap: 2px var(--s3); }
.numeri-riga span::first-letter { text-transform: uppercase; }
.numeri-riga a { color: var(--testo-2); text-underline-offset: 2px; }
.prima-cosa { padding: var(--s2) 0 var(--s3); font-size: var(--t-medio); }
.prima-cosa a { font-weight: 650; text-underline-offset: 2px; }
.blocco { margin-bottom: var(--s4); }
.blocco h2 { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; font-size: var(--t-base); font-weight: 650; border-bottom: 1px solid var(--bordo-forte); }
.blocco-conta { color: var(--testo-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.riga-card { display: flex; align-items: center; gap: var(--s3); min-height: var(--riga-h); padding: var(--s1) var(--s2); margin: 0 calc(var(--s2) * -1); border-radius: var(--r1); border-bottom: 1px solid var(--bordo); color: inherit; text-decoration: none; }
a.riga-card:hover { background: var(--passaggio); }
.riga-card-titolo { flex: 1 1 40%; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-card-meta { flex: 0 1 auto; display: flex; align-items: center; gap: var(--s2); min-width: 0; white-space: nowrap; overflow: hidden; }
.riga-card-pipe { min-width: 96px; text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* --- Bacheca: le fasi riempiono lo spazio -------------------------------- */
.bacheca {
  flex: 1; min-height: 0; display: flex; gap: var(--s2); padding: 0 var(--pagina-m) var(--s3); overflow-x: auto;
}
.fase { flex: 1 1 0; min-width: 200px; display: flex; flex-direction: column; min-height: 0; border-radius: var(--r2); background: var(--superficie-2); border: 1px solid var(--bordo); }
.fase.finale:not(.chiusa) { flex-grow: .8; }
.fase.chiusa { flex: 0 0 44px; min-width: 44px; cursor: default; }
.fase.chiusa .fase-testa { flex-direction: column; height: 100%; padding: var(--s1) 0; gap: var(--s2); }
.fase.chiusa h2 { writing-mode: vertical-rl; }
.fase.bersaglio { border-color: var(--marchio); }
.fase-testa { flex: none; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s1) 0 var(--s2); }
.fase-testa h2 { font-size: var(--t-piccolo); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fase-conta { color: var(--testo-3); font-size: var(--t-piccolo); font-variant-numeric: tabular-nums; }
.fase-sla { margin-left: auto; color: var(--testo-3); font-size: var(--t-micro); white-space: nowrap; padding-right: var(--s1); }
.fase-testa .btn-icona { margin-left: auto; width: 28px; height: 28px; }
.fase.chiusa .fase-testa .btn-icona { margin: 0; }
.fase-card { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 6px; align-content: start; padding: 0 var(--s1) var(--s1); }
.fase-vuota { padding: var(--s3); text-align: center; color: var(--testo-3); font-size: var(--t-piccolo); }
.fase-aggiungi { flex: none; display: flex; align-items: center; gap: var(--s1); height: 30px; margin: 0 var(--s1) var(--s1); padding: 0 var(--s1); border: 0; border-radius: var(--r1); background: none; color: var(--testo-3); cursor: pointer; font-size: var(--t-piccolo); }
.fase-aggiungi:hover { background: var(--passaggio); color: var(--testo); }
.fase-aggiungi .ic { width: 15px; height: 15px; }

.card { position: relative; display: grid; gap: var(--s1); padding: var(--s2); border: 1px solid var(--bordo); border-radius: var(--r2); background: var(--superficie); }
.card:hover { border-color: var(--bordo-forte); }
.card[draggable=true] { cursor: grab; }
.card-sorgente { opacity: .3; }
.card-fantasma { position: fixed; z-index: 90; margin: 0; opacity: .9; pointer-events: none; box-shadow: var(--ombra-finestra); }
.card-etichette { display: flex; flex-wrap: wrap; gap: var(--s1); }
.card-etichette span { padding: 0 var(--s1); border-radius: var(--r1); background: var(--neutro-tenue); color: var(--testo-2); font-size: var(--t-micro); }
.card-titolo { font-weight: 550; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.card-titolo::after { content: ""; position: absolute; inset: 0; }   /* tutta la card apre il link */
.card-titolo:focus-visible { outline: none; }
.card-titolo:focus-visible::after { outline: 2px solid var(--fuoco); border-radius: var(--r2); }
.card-segnali { display: flex; flex-wrap: wrap; gap: var(--s1); }
.card-piede { display: flex; align-items: center; gap: var(--s2); min-height: 22px; color: var(--testo-3); font-size: var(--t-micro); }
.card-persona { flex: none; display: inline-flex; }
.card-conti { flex: 1; min-width: 0; display: flex; gap: var(--s2); overflow: hidden; }
.card-conti span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.card-conti .ic, .card-persona .ic { width: 14px; height: 14px; }
.card-priorita { flex: none; display: inline-grid; place-items: center; width: 18px; }
.card-priorita .ic { width: 16px; height: 16px; }
.prio-urgent { color: var(--rosso); } .prio-high { color: var(--ambra); } .prio-low { color: var(--testo-3); }
.card-menu { position: relative; z-index: 1; opacity: 0; }
.card:hover .card-menu, .card:focus-within .card-menu { opacity: 1; }
.card-menu .btn-icona { width: 24px; height: 24px; }

.griglia-icone { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: var(--s1); }
.griglia-icone button { display: grid; place-items: center; height: 36px; padding: 0; border: 1px solid var(--bordo); border-radius: var(--r2); background: var(--superficie); color: var(--testo-3); cursor: pointer; }
.griglia-icone button.attiva { border-color: var(--marchio); color: var(--testo); background: var(--accento-tenue); }

/* --- Scheda card --------------------------------------------------------- */
.card-nome { padding: 2px var(--s1); margin: 0 calc(var(--s1) * -1); border-color: transparent; background: none; font-size: var(--t-pagina); font-weight: 650; }
.card-nome:hover { border-color: var(--bordo); }
.card-stato { display: flex; align-items: center; gap: var(--s2); }
.nota-fase { display: flex; gap: var(--s2); align-items: center; color: var(--testo-3); font-size: var(--t-piccolo); }
.nota-fase .ic { width: 15px; height: 15px; }
.fatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); padding: var(--s3) 0; border-block: 1px solid var(--bordo); }
.fatti > label, .fatti > div { display: grid; gap: 2px; align-content: start; min-width: 0; }
.fatti > label > span, .fatti > div > span { color: var(--testo-3); font-size: var(--t-micro); font-weight: 600; }
.fatti-largo { grid-column: 1 / -1; }
.lavoro { display: grid; gap: var(--s2); }
.lavoro-azioni { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.lavoro-procede { display: inline-flex; align-items: center; gap: var(--s1); margin-left: auto; font-size: var(--t-piccolo); }
.lavoro-tempi { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); font-size: var(--t-piccolo); }
.lavoro-tempi > div { display: flex; align-items: center; gap: var(--s1); }
.lavoro-tempi dt { color: var(--testo-3); }
.lavoro-tempi input.stretto { width: 72px; min-height: 26px; padding: 1px var(--s1); }
.lavoro-riquadro { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--bordo); border-radius: var(--r2); background: var(--superficie-2); }
.lavoro-riquadro input { width: auto; flex: 1 1 160px; }
.avviso-riga { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2); border-radius: var(--r2); }
.avviso-riga > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.avviso-riga small { display: block; color: var(--testo-3); }
.avviso-riga .ic { margin-top: 1px; }
.avviso-riga.tono-rosso { background: var(--rosso-tenue); } .avviso-riga.tono-rosso > .ic { color: var(--rosso); }
.avviso-riga.tono-ambra { background: var(--ambra-tenue); } .avviso-riga.tono-ambra > .ic { color: var(--ambra); }
.avviso-riga-form { display: grid; gap: var(--s1); margin-top: var(--s2); }
.commenti { display: grid; gap: var(--s3); padding: var(--s2) 0; }
.commento { display: flex; gap: var(--s2); }
.commento > div { flex: 1; min-width: 0; }
.commento-testa { display: flex; align-items: baseline; gap: var(--s2); }
.commento-testa small { color: var(--testo-3); }
.commento-testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.menzione { font-weight: 600; color: var(--accento); }
.nuovo-commento { display: grid; gap: var(--s2); justify-items: end; }
.compiti { display: grid; }
.compiti li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--s2); padding: var(--s1) 0; border-bottom: 1px solid var(--bordo); }
.compiti li.fatto b { font-weight: 400; color: var(--testo-3); text-decoration: line-through; }
.compiti small { grid-column: 1; color: var(--testo-3); }
.compiti-dx { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--s1); }
.storico { display: grid; gap: var(--s2); padding: var(--s2) 0; }
.storico li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s2); }
.storico small { color: var(--testo-3); }
.sezione-titolo { margin: var(--s4) 0 var(--s2); font-size: var(--t-base); font-weight: 650; }
.notifiche { position: relative; }
.notifiche-conta { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--azione); color: var(--azione-testo); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notifiche-pannello { position: absolute; right: 0; top: 100%; z-index: 30; width: min(380px, calc(100vw - 24px)); max-height: 70dvh; overflow: auto; margin-top: var(--s1); background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--r2); box-shadow: var(--ombra-finestra); }
.notifiche-testa { position: sticky; top: 0; padding: var(--s2) var(--s3); background: var(--superficie); border-bottom: 1px solid var(--bordo); font-weight: 650; }
.notifiche-vuoto { padding: var(--s4); color: var(--testo-3); text-align: center; }
.notifica { display: flex; gap: var(--s2); width: 100%; padding: var(--s2) var(--s3); border: 0; border-bottom: 1px solid var(--bordo); background: none; text-align: left; cursor: pointer; }
.notifica:hover { background: var(--passaggio); }
.notifica.nuova { background: var(--accento-tenue); }
.notifica > span { min-width: 0; display: grid; gap: 1px; overflow-wrap: anywhere; }
.notifica b { font-weight: 600; }
.notifica-testo { color: var(--testo-2); }
.notifica small { color: var(--testo-3); }

/* --- Articoli ------------------------------------------------------------ */
.art-sezione { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.art-ricerca { flex: none; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s1) var(--pagina-m) var(--s2); }
.art-ricerca select { flex: 0 1 150px; width: 150px; }
.art-campo { position: relative; flex: 1 1 240px; min-width: 200px; }
.art-campo .ic { position: absolute; left: var(--s2); top: 50%; transform: translateY(-50%); color: var(--testo-3); pointer-events: none; }
.art-campo input { padding-left: 32px; height: 36px; font-size: var(--t-medio); }
.art-riassunto { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: 0 var(--pagina-m) var(--s1); color: var(--testo-3); font-size: var(--t-piccolo); }
.art-legenda { display: flex; gap: var(--s3); flex-wrap: wrap; }
.art-legenda span { display: inline-flex; align-items: center; gap: var(--s1); }
.art-legenda i { width: 8px; height: 8px; border-radius: 2px; }
.sfondo-recente { background: var(--prezzo-recente); } .sfondo-medio { background: var(--prezzo-medio); } .sfondo-vecchio { background: var(--prezzo-vecchio); } .sfondo-listino { background: var(--prezzo-listino); }
.art-vano { flex: 1; min-height: 0; overflow: auto; background: var(--superficie); border-top: 1px solid var(--bordo); outline: none; }
/* table-layout FISSO: con auto ogni tasto fa rimisurare tutte le righe. Non toccare. */
.art-table { width: 100%; min-width: 1040px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--t-piccolo); }
.art-table thead th { position: sticky; top: 0; z-index: 3; height: 30px; padding: 0 var(--s2); background: var(--superficie-2); border-bottom: 1px solid var(--bordo); color: var(--testo-3); font-weight: 600; text-align: left; white-space: nowrap; }
.art-table th.destra, .art-table td.destra { text-align: right; }
.art-table tbody tr { height: 44px; cursor: pointer; }
.art-table tbody td { height: 44px; max-height: 44px; padding: 2px var(--s2); border-bottom: 1px solid var(--bordo); vertical-align: middle; overflow: hidden; }
.art-table tbody tr:hover { background: var(--passaggio); }
.art-table tbody tr:focus-visible { outline-offset: -2px; }
/* Le colonne dei pulsanti si ricavano dal pulsante: una cella più stretta lo taglia. */
.art-table { --art-bottone: 28px; }
.art-table td:first-child, .art-table th:first-child { padding-left: var(--pagina-m); padding-right: 0; }
.art-table .btn-icona { width: var(--art-bottone); height: var(--art-bottone); }
.art-col-stella { width: calc(var(--pagina-m) + var(--art-bottone)); }
.art-col-lista { width: calc(var(--art-bottone) + 2 * var(--s2)); }
.art-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; overflow-wrap: anywhere; }
.art-riga-unica { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.art-codice { font-family: var(--font-codice); font-weight: 600; font-size: var(--t-piccolo); text-decoration: none; overflow-wrap: anywhere; }
.lista-codice { min-width: 0; }
.lista-stato-commerciale { display: block; margin-top: var(--s1); }
.art-codice-cella { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s1); max-height: 38px; overflow: hidden; line-height: 1.5; }
.art-data { font-family: var(--font-codice); font-size: var(--t-micro); color: var(--testo-2); white-space: nowrap; }
.art-prezzo { display: grid; justify-items: end; gap: 0; line-height: 1.25; }
.art-prezzo-riga { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.art-prezzo b { font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.art-prezzo small { max-width: 100%; color: var(--testo-3); font-size: var(--t-micro); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prezzo-recente { color: var(--prezzo-recente); } .prezzo-medio { color: var(--prezzo-medio); }
.prezzo-vecchio { color: var(--prezzo-vecchio); } .prezzo-listino { color: var(--prezzo-listino); }
/* Centraggio dal font: text-box ritaglia il testo su maiuscole e linea di base, poi basta lo stesso spazio sopra e sotto. */
.segno-prezzo, .art-segno {
  --segno-bordo: 0px;
  display: inline-block; padding: calc(var(--s1) - var(--segno-bordo)) var(--s1); border: var(--segno-bordo) solid currentColor; border-radius: 3px;
  font-size: 10px; font-weight: 650; line-height: 1; text-box: trim-both cap alphabetic; white-space: nowrap; text-decoration: none;
}
/* Dove text-box non c'è (Firefox): con interlinea zero, la riga è alta quanto il puntello di 1cap, cioè le maiuscole. */
@supports not (text-box: trim-both cap alphabetic) {
  .segno-prezzo, .art-segno { line-height: 0; }
  .segno-prezzo::before, .art-segno::before { content: ""; display: inline-block; height: 1cap; }
}
.scheda-segnali { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s1); }
.scheda-segnali:empty { display: none; }
.scheda-segnali .art-segno { font-size: var(--t-piccolo); }
.segno-prezzo { --segno-bordo: 1px; }
.art-segno { background: var(--neutro-tenue); color: var(--testo-2); }
.art-segno.rosso { background: var(--rosso-tenue); color: var(--rosso); }
.art-segno.info { background: var(--info-tenue); color: var(--info); }
.art-tech { display: flex; gap: 2px; }
.art-tech a, .art-tech span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r1); }
.art-tech .ic { width: 16px; height: 16px; }
.art-tech a { color: var(--info); }
.art-tech a:hover { background: var(--info-tenue); }
.art-tech span { color: var(--bordo-forte); }
.art-nota { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; padding: 0; border: 0; background: none; overflow: hidden; text-align: left; line-height: 1.3; cursor: text; overflow-wrap: anywhere; white-space: pre-line; }
.art-nota.vuota { color: var(--testo-3); }
.art-nota:hover { text-decoration: underline; text-decoration-style: dotted; }
.art-ancora { display: flex; justify-content: center; padding: var(--s3); }
.quantita { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.quantita b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.btn-icona.stella.su { color: var(--ambra); }
.totali { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); font-size: var(--t-medio); }
.art-scheda { height: 92px; padding: var(--s2) var(--pagina-m); border-bottom: 1px solid var(--bordo); display: grid; gap: 2px; align-content: center; overflow: hidden; }
.art-scheda-testa { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.art-scheda-testa .art-codice { font-size: var(--t-medio); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-scheda-testa b { font-size: var(--t-medio); font-variant-numeric: tabular-nums; }
.art-scheda-desc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--testo-2); font-size: var(--t-base); }
.art-scheda-piede { display: flex; align-items: center; gap: var(--s1); height: 30px; font-size: var(--t-piccolo); }
.art-scheda-piede .tenue { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.art-scheda-piede .btn-icona { width: 36px; height: 30px; }

.scheda-articolo { display: grid; gap: var(--s2); align-content: start; }
.scheda-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.scheda-testa h1 { font-size: var(--t-pagina); }
.scheda-foto { display: flex; gap: var(--s2); flex-wrap: wrap; }
.scheda-foto img { width: 112px; height: 112px; object-fit: contain; padding: var(--s1); border: 1px solid var(--bordo); border-radius: var(--r2); background: var(--bianco-foto); }
.scheda-griglia { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--s6); align-items: start; margin-top: var(--s2); }
.scheda-griglia section { margin-bottom: var(--s5); }
.scheda-griglia h2 { margin-bottom: var(--s2); font-size: var(--t-base); font-weight: 650; }
.scheda-prezzo { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-pagina); font-variant-numeric: tabular-nums; }
.elenco-link { display: grid; gap: var(--s1); }
.elenco-link a { text-underline-offset: 2px; overflow-wrap: anywhere; }
.nota-scheda { width: 100%; min-height: 32px; padding: var(--s1) 0; border: 0; background: none; text-align: left; cursor: text; white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-scheda.vuota { color: var(--testo-3); }

/* --- Configuratori: un solo scorrimento ----------------------------------- */
.cfg-aperto { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cfg-frame { flex: 1; min-height: 0; width: 100%; border: 0; border-top: 1px solid var(--bordo); background: var(--fondo); }
.cfg-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--s3); }
.cfg-tasto { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--bordo); border-radius: var(--r3); background: var(--superficie); color: inherit; text-decoration: none; }
.cfg-tasto:hover { border-color: var(--bordo-forte); }
.cfg-foto { display: flex; align-items: center; justify-content: center; gap: var(--s2); height: 140px; padding: var(--s3); background: var(--bianco-foto); border-bottom: 1px solid var(--bordo); }
.cfg-foto img { min-width: 0; max-height: 100%; object-fit: contain; }
.cfg-testo { display: grid; gap: var(--s2); align-content: start; padding: var(--s3) var(--s4); }
.cfg-nome { font-size: var(--t-titolo); font-weight: 700; }
.cfg-nome span { color: var(--testo-3); font-weight: 600; }

/* --- Scan ---------------------------------------------------------------- */
.scan-corpo { max-width: 520px; margin: 0 auto; display: grid; gap: var(--s3); justify-items: center; text-align: center; padding-top: var(--s3); }
.scan-qr { width: min(300px, 80vw); padding: var(--s3); border-radius: var(--r3); background: var(--bianco-foto); line-height: 0; }
.scan-qr svg { width: 100%; height: auto; }
.scan-foto { width: 100%; height: 64px; font-size: var(--t-titolo); }
.scan-manuale { display: flex; gap: var(--s2); width: 100%; }
.scan-esito { width: 100%; display: grid; gap: var(--s2); text-align: left; }

/* --- AI ------------------------------------------------------------------ */
.ai-spazio { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; border-top: 1px solid var(--bordo); }
.ai-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ai-log { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4) var(--pagina-m); display: flex; flex-direction: column; gap: var(--s3); }
.ai-vuoto { margin: auto; max-width: 560px; display: grid; gap: var(--s2); text-align: center; }
.ai-vuoto h2 { font-size: var(--t-titolo); font-weight: 650; }
.ai-esempi { display: grid; gap: var(--s1); margin-top: var(--s2); }
.ai-esempi button { padding: var(--s2) var(--s3); border: 1px solid var(--bordo); border-radius: var(--r2); background: var(--superficie); text-align: left; cursor: pointer; }
.ai-esempi button:hover:not(:disabled) { background: var(--passaggio); border-color: var(--bordo-forte); }
.ai-msg { max-width: min(760px, 92%); display: grid; gap: var(--s1); justify-items: start; overflow-wrap: anywhere; }
.ai-msg.me { align-self: flex-end; padding: var(--s2) var(--s3); border-radius: var(--r3); background: var(--neutro-tenue); white-space: pre-wrap; }
.ai-msg.nota { color: var(--testo-3); font-size: var(--t-piccolo); }
.ai-msg.errore { color: var(--rosso); }
.ai-fonti { display: flex; gap: var(--s1); align-items: center; color: var(--testo-3); font-size: var(--t-piccolo); }
.ai-fonti .ic { width: 14px; height: 14px; }
.ai-scrivi { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s2) var(--pagina-m) var(--s3); border-top: 1px solid var(--bordo); }
.ai-scrivi-azioni { display: grid; gap: var(--s1); width: 160px; }
.ai-laterale { display: flex; flex-direction: column; gap: var(--s2); min-height: 0; padding: var(--s2) var(--s3); border-left: 1px solid var(--bordo); background: var(--superficie-2); }
.ai-doc-lista { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: var(--s2); align-content: start; }
.ai-doc-lista h3 { padding: var(--s1) 0 2px; color: var(--testo-3); font-size: var(--t-micro); font-weight: 600; }
.ai-doc { display: block; width: 100%; padding: 3px var(--s1); border: 0; border-radius: var(--r1); background: none; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ai-doc small { display: block; color: var(--testo-3); }
.ai-doc:hover { background: var(--passaggio); }
.ai-apri-laterale { display: none; }

/* --- Statistiche e cruscotti --------------------------------------------- */
.valori { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding: var(--s1) 0 var(--s3); border-bottom: 1px solid var(--bordo); }
.valore { display: grid; gap: 0; color: inherit; text-decoration: none; min-width: 72px; }
.valore b { font-size: var(--t-pagina); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.valore span { color: var(--testo-3); font-size: var(--t-piccolo); }
a.valore:hover b { text-decoration: underline; text-underline-offset: 3px; }
.nota-piede { margin-top: var(--s2); font-size: var(--t-piccolo); }
.due-colonne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--s6); align-items: start; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico-asse { stroke: var(--bordo-forte); }
rect.grafico-a { fill: var(--bordo-forte); } rect.grafico-b { fill: var(--marchio); }
i.grafico-a { background: var(--bordo-forte); } i.grafico-b { background: var(--marchio); }
.grafico-num { fill: var(--testo-2); font-size: 10px; }
.grafico-et { fill: var(--testo-3); font-size: 10px; }
.grafico figcaption { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-piccolo); }
.grafico figcaption span { display: inline-flex; align-items: center; gap: var(--s1); }
.grafico figcaption i { width: 10px; height: 10px; border-radius: 2px; }

/* --- Coda conoscenza ------------------------------------------------------ */
.elemento-coda { display: grid; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--bordo); }
.elemento-coda-testa { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.elemento-coda-testa h2 { flex: 1 1 280px; min-width: 0; font-size: var(--t-base); font-weight: 650; overflow-wrap: anywhere; }
.elemento-coda summary { cursor: pointer; color: var(--testo-2); font-size: var(--t-piccolo); }
.elemento-coda details[open] summary { margin-bottom: var(--s2); }

/* --- Account ------------------------------------------------------------- */
.account-foto { display: flex; align-items: center; gap: var(--s3); }

/* --- pipe.agent ---------------------------------------------------------- */
.pa-panel { padding: var(--s3) var(--s4); margin-bottom: var(--s3); max-width: 1100px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r3); }
.pa-panel h3 { margin-bottom: var(--s2); font-size: var(--t-medio); font-weight: 650; display: flex; align-items: center; gap: var(--s2); }
.pa-azioni { margin-left: auto; display: flex; gap: var(--s1); }
.pa-ok { color: var(--ok); font-weight: 600; margin-top: var(--s3); }
.pa-spiega { color: var(--testo-3); font-size: var(--t-piccolo); margin-top: var(--s2); }
.pa-presets { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pa-preset { display: flex; align-items: center; min-width: 170px; border: 1px solid var(--bordo-forte); border-radius: var(--r2); background: var(--superficie); }
.pa-preset:hover { border-color: var(--testo-3); }
.pa-preset.active { border-color: var(--marchio); background: var(--accento-tenue); }
.pa-preset-sceglie { flex: 1; display: grid; gap: 2px; justify-items: start; padding: var(--s2) var(--s1) var(--s2) var(--s3); border: 0; background: none; cursor: pointer; text-align: left; }
.pa-kind { font-size: 10px; font-weight: 650; color: var(--testo-3); }
.pa-form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.pa-form label { display: grid; gap: var(--s1); font-size: var(--t-piccolo); font-weight: 600; color: var(--testo-2); }
.pa-form textarea { min-height: 64px; }
.pa-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.pa-form .pa-check, .pa-form .pa-inline { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 550; }
.pa-form .pa-inline select { width: auto; }
.pa-persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2); }
.pa-persona { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--bordo-forte); border-radius: var(--r2); cursor: pointer; }
.pa-persona.active { border-color: var(--marchio); background: var(--accento-tenue); }
.pa-persona span { display: grid; min-width: 0; }
.pa-seg { display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: var(--r2); overflow: hidden; }
.pa-seg button { display: inline-flex; align-items: center; gap: var(--s1); height: var(--bersaglio); padding: 0 var(--s3); border: 0; background: var(--superficie); color: var(--testo-2); cursor: pointer; font-weight: 550; }
.pa-seg button + button { border-left: 1px solid var(--bordo-forte); }
.pa-seg button.active { background: var(--neutro-tenue); color: var(--testo); box-shadow: inset 0 -2px 0 var(--marchio); }
.pa-call { border-top: 1px solid var(--bordo); padding: var(--s2) 0; }
.pa-call:first-of-type { border-top: 0; }
.pa-call-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pa-quando, .pa-dest { display: inline-flex; align-items: center; gap: var(--s1); color: var(--testo-3); font-size: var(--t-piccolo); }
.pa-consegne { display: grid; gap: var(--s1); margin-top: var(--s1); }
.pa-consegna { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pa-consegna small { color: var(--testo-3); }
.pa-consegna q { padding: 1px var(--s2); border-radius: var(--r1); background: var(--superficie-2); }
.pa-scelte { display: grid; gap: var(--s2); }
.pa-scelta-riga { display: flex; gap: var(--s2); align-items: center; }
.pa-scelta-riga input { flex: 1; }
.pa-num { width: 22px; text-align: right; color: var(--testo-3); font-weight: 650; }
.pa-risposte { display: inline-flex; flex-wrap: wrap; gap: var(--s1); }
.pa-risposte span { padding: 0 var(--s2); border-radius: var(--r1); background: var(--ok-tenue); color: var(--ok); font-weight: 650; }
.pa-cal { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--bordo); border-radius: var(--r3); background: var(--superficie-2); }
.pa-cal-mese { flex: 1 1 340px; max-width: 480px; }
.pa-cal-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.pa-cal-testa b { font-size: var(--t-titolo); text-transform: capitalize; }
.pa-cal-testa button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--bordo-forte); border-radius: var(--r2); background: var(--superficie); cursor: pointer; }
.pa-cal-testa button:disabled { opacity: .4; cursor: default; }
.pa-cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); }
.pa-cal-dow { text-align: center; font-size: var(--t-micro); font-weight: 650; color: var(--testo-3); padding: var(--s1) 0; }
.pa-cal-giorno { height: 44px; border: 1px solid var(--bordo); border-radius: var(--r2); background: var(--superficie); font-size: var(--t-medio); font-weight: 600; cursor: pointer; }
.pa-cal-giorno:hover:not(:disabled) { border-color: var(--bordo-forte); background: var(--passaggio); }
.pa-cal-giorno.oggi { border-color: var(--marchio); }
.pa-cal-giorno.scelto { background: var(--azione); border-color: var(--azione); color: var(--azione-testo); }
.pa-cal-giorno:disabled { opacity: .4; cursor: default; }
.pa-cal-vuoto { height: 44px; }
.pa-cal-ora { flex: 1 1 220px; display: grid; gap: var(--s3); align-content: start; }
.pa-cal-sel { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-pagina); font-weight: 700; }
.pa-cal-sel select { width: auto; font-size: var(--t-titolo); font-weight: 650; }
.pa-cal-rapidi { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pa-cal-riepilogo { display: flex; align-items: center; gap: var(--s1); font-weight: 650; }

/* --- Login --------------------------------------------------------------- */
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: var(--s4); background: var(--fondo); }
.login-card { display: grid; gap: var(--s3); width: min(340px, 100%); padding: var(--s6); border: 1px solid var(--bordo); border-radius: var(--r3); background: var(--superficie); }
.login-logo { height: 34px; justify-self: start; }
.login-card h1 { font-size: var(--t-pagina); font-weight: 650; }
.login-error { color: var(--rosso); }
.login-card .btn { width: 100%; margin-top: var(--s1); height: 36px; }

/* --- Larghezze intermedie ------------------------------------------------- */
@media (max-width: 1180px) {
  .ai-spazio { grid-template-columns: minmax(0, 1fr) 240px; }
  .due-colonne, .scheda-griglia { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* --- Telefono: si parte da qui, non si stringe il desktop ----------------- */
@media (max-width: 768px) {
  .btn-piccolo { height: 36px; padding: 0 var(--s3); font-size: var(--t-base); }
  .pagina-testa { grid-template-columns: minmax(0, 1fr); }
  .pagina-azioni { justify-content: flex-start; }
  .riga-card { flex-wrap: wrap; gap: var(--s1) var(--s2); min-height: 56px; padding: var(--s2); }
  .riga-card-titolo { flex: 1 1 100%; white-space: normal; }
  .riga-card-meta { flex-wrap: wrap; white-space: normal; }
  .riga-card-pipe { min-width: 0; text-align: left; }

  /* Tabelle: ogni riga una scheda col dato chiave, mai scorrimento di lato. */
  .tab-schede, .tab-schede tbody, .tab-schede tr, .tab-schede td { display: block; width: 100%; }
  .tab-schede thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tab-schede tr { padding: var(--s2) var(--pagina-m); border-bottom: 1px solid var(--bordo); }
  .tab-schede td { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 2px 0 !important; border: 0; min-height: 26px; text-align: right; }
  .tab-schede td::before { content: attr(data-et); color: var(--testo-3); font-size: var(--t-piccolo); text-align: left; flex: none; }
  .tab-schede td[data-et=""]::before { content: none; }
  .tab-schede td.principale { justify-content: flex-start; text-align: left; font-weight: 600; font-size: var(--t-medio); }
  .tab-schede td.principale::before { content: none; }
  .tab-schede td.nascondi-tel { display: none; }
  /* Attività: titolo, poi i dati in linea. Niente etichette: stato e priorità si leggono da soli. */
  .tab-schede.in-linea tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); }
  .tab-schede.in-linea td { display: inline-flex; width: auto; min-height: 22px; font-size: var(--t-piccolo); color: var(--testo-3); }
  .tab-schede.in-linea td::before { content: none; }
  .tab-schede.in-linea td.principale { display: flex; width: 100%; color: var(--testo); font-size: var(--t-medio); }
  .cella-card { flex-wrap: wrap; }

  .bacheca { padding: 0 var(--pagina-m) var(--s2); overflow-x: visible; }
  .fase { flex: 1 1 100%; min-width: 0; border: 0; background: none; }
  .fase-testa { display: none; }
  .fase-card { padding: 0; }
  .card-menu { opacity: 1; }
  .card-menu .btn-icona { width: 40px; height: 40px; }
  .fase-aggiungi { height: 44px; margin: var(--s1) 0 0; }
  .fatti { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lavoro-procede { margin-left: 0; flex-wrap: wrap; }
  .storico li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pannello-corpo { padding: var(--s3) var(--pagina-m) var(--s6); }

  .art-ricerca { padding-bottom: var(--s1); }
  .art-ricerca select { flex: 1 1 calc(50% - var(--s2)); }
  .art-campo { flex-basis: 100%; }
  .art-campo input { height: 44px; }
  .art-legenda { display: none; }

  .ai-spazio { grid-template-columns: minmax(0, 1fr); }
  .ai-laterale { display: none; position: absolute; inset: 0; z-index: 5; border: 0; background: var(--superficie); }
  .ai-spazio.laterale-aperto .ai-laterale { display: flex; }
  .ai-apri-laterale { display: inline-flex; position: absolute; top: var(--s2); right: var(--pagina-m); z-index: 6; }
  .ai-scrivi { grid-template-columns: minmax(0, 1fr); }
  .ai-scrivi-azioni { width: auto; grid-template-columns: minmax(0, 1fr) auto; }
  .ai-msg { max-width: 100%; }

  .pa-preset { min-width: 0; flex: 1 1 140px; }
  .pa-panel { padding: var(--s3); }
  .scheda-testa .riga-bottoni { width: 100%; }
}