/* Gestionale Paoloni — grigi neutri, superfici pulite */
:root {
  --tela: #f6f6f7;
  --barra: #eeeef0;
  --carta: #ffffff;
  --inchiostro: #18181b;
  --testo-2: #52525b;
  --testo-3: #8e8e96;
  --linea: #e4e4e7;
  --linea-forte: #d4d4d8;
  --hover: #f1f1f3;
  --attivo: #e4e4e7;
  --verde: #15803d;   --verde-sf: #ecfdf3;
  --ambra: #b45309;   --ambra-sf: #fff7e6;
  --rosso: #b91c1c;   --rosso-sf: #fef1f1;
  --blu: #3f3f46;     --blu-sf: #efeff1;  /* niente blu: testi e collegamenti in grigio scuro */
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --ombra: 0 1px 2px rgba(24,24,27,.05), 0 8px 24px rgba(24,24,27,.08);
  --t: 140ms cubic-bezier(.2,.7,.3,1);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--inchiostro);
  background: var(--tela);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
a.link, .contenuto p a, td a { color: var(--inchiostro); }
a.link:hover, td a:hover { text-decoration: underline; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 15.5px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 10px; }
small, .tenue { color: var(--testo-2); }
.debole { color: var(--testo-3); }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
svg.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- struttura */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.laterale {
  background: var(--barra); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 4px; padding: 18px 12px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: start;
}
.laterale .marchio { display: block; padding: 6px 10px 18px; color: var(--inchiostro); }
.logo-svg { display: block; width: 100%; max-width: 180px; height: auto; }
.laterale .nuovo { margin: 0 2px 14px; justify-content: center; }
.voce {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s);
  color: var(--testo-2); font-weight: 500; transition: background var(--t), color var(--t);
}
.voce:hover { background: var(--hover); color: var(--inchiostro); }
.voce.attiva { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 2px rgba(24,24,27,.06); }
.voce .conta { margin-left: auto; font-size: 12px; background: var(--inchiostro); color: #fff; border-radius: 999px; padding: 0 7px; line-height: 18px; }
.gruppo-voci { margin-top: 14px; padding: 0 10px 4px; font-size: 12px; color: var(--testo-3); }
.laterale .piede { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--inchiostro); color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; flex: none; }
.piede .nome { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.piede button, .piede a { color: var(--testo-2); }

.principale { min-width: 0; }
.testata-mobile { display: none; }
.contenuto { max-width: 1400px; margin: 0 auto; padding: 28px 32px 80px; }
.intestazione { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.intestazione .sotto { color: var(--testo-2); margin-top: 4px; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .laterale { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform var(--t); box-shadow: var(--ombra); }
  .app.menu-aperto .laterale { transform: none; }
  .testata-mobile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--barra); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 40; }
  .testata-mobile .logo-svg { max-width: 150px; }
  .contenuto { padding: 20px 16px 64px; }
}

/* ---------------------------------------------------------------- superfici */
.pannello { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 20px 22px; margin-bottom: 16px; }
.pannello.stretto { padding: 14px 16px; }
.pannello > h2:first-child { margin-top: 0; }
.testa-pannello { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.testa-pannello h2 { margin: 0; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.numero { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 14px 16px; transition: border-color var(--t), transform var(--t); display: block; }
a.numero:hover { border-color: var(--linea-forte); }
.numero b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero span { font-size: 13px; color: var(--testo-2); }
.numero.chiama { border-color: var(--inchiostro); }

/* ---------------------------------------------------------------- tabelle */
.tabella { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--testo-3); padding: 0 10px 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr.cliccabile { cursor: pointer; transition: background var(--t); }
tbody tr.cliccabile:hover { background: var(--hover); }
.sec { display: block; font-size: 12.5px; color: var(--testo-2); }

/* ---------------------------------------------------------------- etichette e pallini */
.stato { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 2px 9px 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--hover); color: var(--testo-2); }
.stato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-preventivo, .s-bozza { background: var(--hover); color: var(--testo-2); }
.s-in_attesa, .s-inviato, .s-parziale, .s-attesa { background: var(--ambra-sf); color: var(--ambra); }
.s-pronto, .s-ricevuto, .s-ok { background: var(--verde-sf); color: var(--verde); }
.s-consegnato { background: var(--blu-sf); color: var(--blu); }
.s-annullato, .s-ritardo { background: var(--rosso-sf); color: var(--rosso); }
.canale { font-size: 12px; color: var(--testo-2); border: 1px solid var(--linea); border-radius: 6px; padding: 1px 6px; }
.canale.online { color: var(--blu); border-color: var(--linea-forte); }
.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--linea-forte); flex: none; box-shadow: 0 0 0 3px var(--carta); }
.pallino.verde { background: #22c55e; } .pallino.arancio { background: #f59e0b; } .pallino.rosso { background: #ef4444; }

/* ---------------------------------------------------------------- pulsanti */
.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--linea-forte); background: var(--carta); color: var(--inchiostro);
  font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(.98); }
.btn.primario { background: #e6e4dd; border-color: #c9c7be; color: #2c2c2a; font-weight: 600; }
.btn.primario:hover { background: #d8d6cd; border-color: #b4b2a9; }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--testo-2); }
.btn.fantasma:hover { background: var(--hover); color: var(--inchiostro); }
.btn.pericolo { color: var(--rosso); }
.btn.piccolo { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.icona { width: 32px; padding: 0; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: default; }
form.in-linea { display: inline; }

/* ---------------------------------------------------------------- campi */
label, .etichetta-campo { display: block; font-size: 12.5px; font-weight: 500; color: var(--testo-2); margin-bottom: 5px; }
input[type=text], input[type=search], input[type=email], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=url], input[type=password], input[type=tel], select, textarea {
  width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--linea-forte); border-radius: 10px;
  font: inherit; background: var(--carta); color: var(--inchiostro); transition: border-color var(--t), box-shadow var(--t);
}
textarea { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--inchiostro); box-shadow: 0 0 0 3px rgba(24,24,27,.08); }
input[type=checkbox], input[type=radio] { accent-color: var(--inchiostro); width: 16px; height: 16px; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.campi .largo { grid-column: 1 / -1; }
.campo-errore input, .campo-errore select { border-color: var(--rosso); }
.errore { color: var(--rosso); font-size: 12.5px; margin-top: 4px; }
.aiuto { color: var(--testo-3); font-size: 12.5px; margin-top: 4px; }
.scelta { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; transition: border-color var(--t), background var(--t); }
.scelta:hover { background: var(--hover); }
.scelta:has(input:checked) { border-color: var(--inchiostro); }
.scelta b { display: block; font-weight: 500; }
.scelta span { font-size: 12.5px; color: var(--testo-2); }
.segmenti { display: inline-flex; background: var(--hover); border-radius: 10px; padding: 3px; gap: 2px; }
.segmenti label { margin: 0; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--testo-2); font-weight: 500; font-size: 13.5px; }
.segmenti input { display: none; }
.segmenti label:has(input:checked) { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 2px rgba(24,24,27,.1); }
.cerca { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.cerca .casella { position: relative; flex: 1; min-width: 240px; }
.cerca .casella svg { position: absolute; left: 11px; top: 10px; color: var(--testo-3); }
.cerca .casella input { padding-left: 36px; }
.cerca select { width: auto; }

/* ---------------------------------------------------------------- messaggi */
.messaggi { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.messaggi li { padding: 11px 14px; border-radius: var(--r-m); border: 1px solid; font-weight: 500; }
.messaggi .success { background: var(--verde-sf); color: var(--verde); border-color: #c8ecd5; }
.messaggi .error { background: var(--rosso-sf); color: var(--rosso); border-color: #f7cfcf; }
.messaggi .warning, .messaggi .info { background: var(--ambra-sf); color: var(--ambra); border-color: #f6e0b5; }
.vuoto { color: var(--testo-2); padding: 18px 0 6px; }
.dettagli { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; }
.dettagli dt { color: var(--testo-2); }
.dettagli dd { margin: 0; }
.paginazione { display: flex; gap: 8px; justify-content: center; margin-top: 16px; align-items: center; }

/* ---------------------------------------------------------------- menu a comparsa (ricerca) */
.tendina {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--carta);
  border: 1px solid var(--linea); border-radius: var(--r-m); box-shadow: var(--ombra); max-height: 360px; overflow-y: auto;
  padding: 6px; animation: compari 120ms ease-out;
}
@keyframes compari { from { opacity: 0; transform: translateY(-4px); } }
.tendina .opz { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.tendina .opz.sel, .tendina .opz:hover { background: var(--hover); }
.tendina .opz .testo { flex: 1; min-width: 0; }
.tendina .opz .testo b { font-weight: 500; }
.tendina .opz .testo small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendina .opz.crea { border-top: 1px solid var(--linea); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 10px; font-weight: 500; }
.tendina .vuota { padding: 10px; color: var(--testo-2); }

/* ---------------------------------------------------------------- scheda ordine */
.ordine-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.riepilogo { position: sticky; top: 20px; }
@media (max-width: 1100px) { .ordine-layout { grid-template-columns: 1fr; } .riepilogo { position: static; } }
.cliente-scelto { display: flex; gap: 14px; align-items: flex-start; }
.cliente-scelto .avatar { width: 40px; height: 40px; font-size: 15px; background: var(--attivo); color: var(--inchiostro); }
.cliente-scelto .info { flex: 1; min-width: 0; }
.cliente-scelto .info b { font-size: 15.5px; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: var(--hover); color: var(--testo-2); border-radius: 6px; padding: 1px 7px; margin: 4px 4px 0 0; }

.righe { display: grid; gap: 0; }
.riga { display: grid; grid-template-columns: 20px minmax(200px, 1fr) 84px 96px 62px 56px 96px 30px; gap: 6px; align-items: start; padding: 10px 6px; border-bottom: 1px solid var(--linea); background: var(--carta); border-radius: 10px; transition: background var(--t), box-shadow var(--t); }
.riga.intestazione-righe { color: var(--testo-3); font-size: 12.5px; font-weight: 500; padding-top: 0; padding-bottom: 8px; border-radius: 0; }
.riga input, .riga select { height: 34px; padding: 0 9px; border-radius: 8px; }
.riga .q input, .riga .p input, .riga .s input, .riga .i input { text-align: right; }
.riga .tot { text-align: right; padding-top: 7px; font-variant-numeric: tabular-nums; font-weight: 500; }
.riga .maniglia { cursor: grab; color: var(--testo-3); padding-top: 8px; display: flex; justify-content: center; }
.riga.trascinata { opacity: .4; }
.riga.sopra { box-shadow: inset 0 2px 0 var(--inchiostro); }
.riga .art { position: relative; }
.riga .art .campo-art { display: flex; align-items: center; gap: 8px; }
.riga .art .campo-art input { flex: 1; }
.riga .art > .tendina { right: auto; width: max(100%, 520px); }
.riga .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--testo-2); margin-top: 5px; align-items: center; }
.riga .meta .disp { display: inline-flex; align-items: center; gap: 6px; cursor: help; position: relative; }
.riga.nota { grid-template-columns: 22px minmax(0, 1fr) 32px; background: transparent; padding-top: 4px; }
.riga.nota .q, .riga.nota .p, .riga.nota .s, .riga.nota .i, .riga.nota .tot { display: none; }
.riga .prima { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--testo-2); }
.riga .prima input { width: 14px; height: 14px; }
.riga .gia { color: var(--blu); }
.avviso-fp { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--rosso); background: var(--rosso-sf); border-radius: 6px; padding: 0 6px; line-height: 18px; }
.riga .promo { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); font-weight: 500; }
.riga .promo svg.ic, .riga .abbinato svg.ic { width: 14px; height: 14px; }
.riga .abbinato { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; color: var(--testo-2); background: var(--hover); border: 1px dashed var(--linea-forte); border-radius: 999px; padding: 1px 9px 1px 6px; cursor: pointer; }
.riga .abbinato:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
.riga.nota input { border-style: dashed; background: #fafafa; font-style: italic; }
.riga.servizio .art input { background: #fafafa; }
.fuori-catalogo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 10px; border: 1px dashed var(--linea-forte); border-radius: 10px; background: #fbfbfb; }
.fuori-catalogo .titolo { grid-column: 1 / -1; font-size: 12.5px; color: var(--testo-2); display: flex; justify-content: space-between; gap: 8px; }
.fuori-catalogo label { margin-bottom: 3px; }
.suggerimento-tip {
  position: absolute; z-index: 25; left: 0; top: calc(100% + 6px); width: 270px; background: var(--inchiostro); color: #fff;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; box-shadow: var(--ombra); pointer-events: none;
}
.suggerimento-tip b { color: #fff; }
.suggerimento-tip .r { display: flex; justify-content: space-between; gap: 12px; }
.suggerimento-tip .r span:first-child { color: #c4c4cc; }
.aggiungi-righe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .riga { grid-template-columns: 22px repeat(4, minmax(0, 1fr)) 32px; row-gap: 4px; }
  .riga .maniglia { grid-column: 1; grid-row: 1; }
  .riga .art { grid-column: 2 / 6; grid-row: 1; }
  .riga .rimuovi { grid-column: 6; grid-row: 1; }
  .riga .q { grid-column: 2; grid-row: 2; } .riga .p { grid-column: 3; grid-row: 2; }
  .riga .s { grid-column: 4; grid-row: 2; } .riga .i { grid-column: 5; grid-row: 2; }
  .riga .tot { grid-column: 2 / 6; grid-row: 3; padding-top: 0; }
  .riga .q::before, .riga .p::before, .riga .s::before, .riga .i::before { display: block; font-size: 11px; color: var(--testo-3); margin-bottom: 2px; }
  .riga .q::before { content: "Q.tà"; } .riga .p::before { content: "Prezzo"; } .riga .s::before { content: "Sconto %"; } .riga .i::before { content: "IVA %"; }
  .riga.nota .art { grid-column: 2 / 6; }
  .riga .art > .tendina { width: calc(100vw - 40px); }
  .riga.intestazione-righe { display: none; }
}
@media (max-width: 700px) {
  /* le tabelle larghe scorrono dentro il loro riquadro invece di allargare la pagina */
  .pannello { overflow-x: auto; }
  .pannello table td, .pannello table th { white-space: normal; }
  .intestazione .azioni { width: 100%; }
}

.conti { display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.conti .r { display: flex; justify-content: space-between; gap: 12px; }
.conti .r span:first-child { color: var(--testo-2); }
.conti .totale { font-size: 22px; font-weight: 600; letter-spacing: -.01em; border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 4px; }
.conti .totale span:first-child { color: var(--inchiostro); font-size: 15px; font-weight: 600; align-self: center; }
.aggiunte { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.aggiunta { display: grid; grid-template-columns: 1fr 110px 32px; gap: 6px; align-items: center; margin-top: 8px; }
.aggiunta input, .aggiunta select { height: 32px; }
.separatore { border: 0; border-top: 1px solid var(--linea); margin: 16px 0; }
.dicitura { font-size: 12.5px; color: var(--testo-2); background: var(--hover); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }

/* finestra (dialog) */
dialog { border: 0; border-radius: var(--r-l); padding: 0; width: min(760px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(24,24,27,.25); color: var(--inchiostro); }
dialog::backdrop { background: rgba(24,24,27,.35); backdrop-filter: blur(2px); }
dialog[open] { animation: compari 160ms ease-out; }
dialog .testa { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 0; }
dialog .corpo { padding: 16px 22px; max-height: calc(100vh - 200px); overflow-y: auto; }
dialog .piedino { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--linea); }
.blocco-indirizzo { border: 1px solid var(--linea); border-radius: var(--r-m); padding: 14px; margin-top: 10px; position: relative; }
.blocco-indirizzo .togli { position: absolute; top: 8px; right: 8px; }

/* login */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.accesso .scheda { width: min(380px, 100%); background: var(--carta); border: 1px solid var(--linea); border-radius: 20px; padding: 32px 30px; }
.accesso .logo-svg { max-width: 240px; margin-bottom: 26px; color: var(--inchiostro); }
.accesso p { color: var(--testo-2); }
.accesso .btn { width: 100%; justify-content: center; height: 40px; margin-top: 6px; }
.accesso .campo { margin-bottom: 14px; }

@media print {
  .laterale, .testata-mobile, .azioni, .non-stampare, .messaggi { display: none !important; }
  .app { display: block; }
  :root, body { background: #fff; }
  .pannello { border: 0; padding: 0; }
}

/* ---------------------------------------------------------------- barra superiore */
.barra-alta { position: sticky; top: 0; z-index: 35; display: flex; align-items: center; gap: 10px; padding: 10px 32px; background: rgba(246,246,247,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.barra-alta .indietro { color: var(--testo-2); }
.ricerca-globale { position: relative; flex: 1; max-width: 560px; }
.ricerca-globale input { padding-left: 36px; padding-right: 64px; background: var(--carta); }
.ricerca-globale > svg { position: absolute; left: 11px; top: 10px; color: var(--testo-3); }
.ricerca-globale input:not(:placeholder-shown) ~ kbd { display: none; }
.ricerca-globale kbd { position: absolute; right: 10px; top: 9px; font: 12px/18px inherit; color: var(--testo-3); border: 1px solid var(--linea); border-radius: 6px; padding: 0 6px; background: var(--tela); }
.ricerca-globale .tendina { width: 100%; max-height: 70vh; }
.tendina .titolo-gruppo { font-size: 12px; color: var(--testo-3); padding: 8px 10px 4px; }
.barra-alta .destra { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.campanella { position: relative; }
.campanella .conta { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--tela); }
.pannello-notifiche { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-m); box-shadow: var(--ombra); padding: 8px; z-index: 40; animation: compari 120ms ease-out; }
.pannello-notifiche a.voce-notifica { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; align-items: flex-start; }
.pannello-notifiche a.voce-notifica:hover { background: var(--hover); }
.voce-notifica .punto { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--blu); }
.voce-notifica .punto.ambra { background: #f59e0b; } .voce-notifica .punto.rosso { background: #ef4444; }
.menu-nuovo { position: relative; margin: 0 2px 14px; }
.menu-nuovo summary { list-style: none; justify-content: center; width: 100%; }
.menu-nuovo summary::-webkit-details-marker { display: none; }
.menu-nuovo .voci { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-m); box-shadow: var(--ombra); padding: 6px; z-index: 60; }
.menu-nuovo .voci a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--inchiostro); }
.menu-nuovo .voci a:hover { background: var(--hover); }
.piede .ruolo { display: block; font-size: 12px; color: var(--testo-3); font-weight: 400; }
@media (max-width: 900px) { .barra-alta { padding: 8px 16px; top: 57px; } .barra-alta kbd { display: none; } }

/* ---------------------------------------------------------------- cronologia (pannello laterale) */
.cassetto { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--carta); border-left: 1px solid var(--linea); box-shadow: -12px 0 40px rgba(24,24,27,.08); z-index: 70; transform: translateX(100%); transition: transform 180ms cubic-bezier(.2,.7,.3,1); display: flex; flex-direction: column; }
.cassetto.aperto { transform: none; }
.cassetto .testa { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.cassetto .schede { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--linea); }
.cassetto .schede button { background: none; border: 0; font: inherit; font-weight: 500; color: var(--testo-2); padding: 8px 10px; border-bottom: 2px solid transparent; cursor: pointer; }
.cassetto .schede button.attiva { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }
.cassetto .scrivi { padding: 14px 18px; border-bottom: 1px solid var(--linea); display: grid; gap: 8px; }
.cassetto .scrivi textarea { min-height: 70px; }
.cassetto .scrivi .riga-azioni { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cassetto .flusso { flex: 1; overflow-y: auto; padding: 8px 18px 40px; }
.evento { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.evento:last-child { border-bottom: 0; }
.evento .avatar { width: 30px; height: 30px; font-size: 12px; background: var(--attivo); color: var(--inchiostro); }
.evento .avatar.sistema { background: var(--hover); color: var(--testo-3); }
.evento .chi { font-weight: 600; font-size: 13.5px; }
.evento .quando { color: var(--testo-3); font-size: 12px; margin-left: 6px; font-weight: 400; }
.evento .testo { white-space: pre-line; margin-top: 2px; overflow-wrap: anywhere; }
.evento .testo .menzione { color: var(--blu); font-weight: 500; }
.evento.commento .testo { background: var(--hover); border-radius: 10px; padding: 8px 10px; margin-top: 4px; }
.evento.email .testo { border-left: 3px solid var(--blu); padding-left: 10px; margin-top: 4px; }
.evento.chiamata .testo { border-left: 3px solid #22c55e; padding-left: 10px; margin-top: 4px; }
.cambi { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--testo-2); }
.cambi li { padding: 2px 0; }
.cambi .da { text-decoration: line-through; color: var(--testo-3); }
.allegati-evento { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.allegati-evento a { font-size: 12.5px; border: 1px solid var(--linea); border-radius: 8px; padding: 3px 8px; color: var(--inchiostro); background: var(--carta); }
.attivita-aperte { display: grid; gap: 6px; padding: 10px 0 4px; }
.att { display: flex; gap: 10px; align-items: center; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; }
.att .scad { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 1px 6px; }
.att .scad.scaduta { background: var(--rosso-sf); color: var(--rosso); } .att .scad.oggi { background: var(--ambra-sf); color: var(--ambra); } .att .scad.futura { background: var(--verde-sf); color: var(--verde); }
.att .cosa { flex: 1; min-width: 0; font-size: 13.5px; }
.att .cosa small { display: block; }
.btn .contatore { background: var(--hover); border-radius: 999px; font-size: 12px; padding: 0 7px; line-height: 18px; color: var(--testo-2); }
.velo { position: fixed; inset: 0; background: rgba(24,24,27,.18); z-index: 65; opacity: 0; pointer-events: none; transition: opacity 180ms; }
.velo.aperto { opacity: 1; pointer-events: auto; }
.suggerimenti-menzione { position: absolute; z-index: 80; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--ombra); padding: 4px; min-width: 200px; }
.suggerimenti-menzione div { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.suggerimenti-menzione div.sel, .suggerimenti-menzione div:hover { background: var(--hover); }

/* editor email */
.editor-barra { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--linea-forte); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--tela); }
.editor-barra button { width: 30px; height: 28px; border: 0; background: none; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600; color: var(--testo-2); }
.editor-barra button:hover { background: var(--hover); color: var(--inchiostro); }
.editor { min-height: 220px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--linea-forte); border-radius: 0 0 10px 10px; padding: 12px 14px; outline: none; background: var(--carta); line-height: 1.6; }
.editor:focus { border-color: var(--inchiostro); }
.destinatari { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--linea-forte); border-radius: 10px; padding: 5px 8px; min-height: 38px; }
.destinatari .chip { margin: 0; background: var(--attivo); color: var(--inchiostro); font-size: 13px; padding: 2px 4px 2px 9px; }
.destinatari .chip button { border: 0; background: none; cursor: pointer; color: var(--testo-2); padding: 0 4px; }
.destinatari input { border: 0; height: 28px; padding: 0 4px; flex: 1; min-width: 160px; box-shadow: none; }
.destinatari input:focus { box-shadow: none; }
.avviso-prova { background: var(--ambra-sf); color: var(--ambra); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.lista-domande { display: grid; gap: 8px; }
.lista-domande .scelta .attesa { display: block; color: var(--inchiostro); font-weight: 500; margin-top: 2px; }

/* ---------------------------------------------------------------- fase 2: articoli */
.etichette { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip-stato { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--hover); color: var(--testo-2); }
.chip-stato.rosso { background: var(--rosso-sf); color: var(--rosso); }
.chip-stato.ambra { background: var(--ambra-sf); color: var(--ambra); }
.chip-stato.verde { background: var(--verde-sf); color: var(--verde); }
.chip-stato.blu { background: var(--blu-sf); color: var(--blu); }
.schede-tab { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin: -4px 0 14px; overflow-x: auto; }
.schede-tab button { font: inherit; font-weight: 500; font-size: 13.5px; color: var(--testo-2); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.schede-tab button.attiva { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }
.schede-tab .conta { font-size: 11.5px; color: var(--testo-3); margin-left: 4px; }
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .barra { transition: opacity var(--t); }
.grafico .barra.venduto { fill: #2a78d6; } .grafico .barra.entrate { fill: #eb6834; } .grafico .barra.uscite { fill: #1baf7a; }
.grafico .bersaglio { fill: transparent; cursor: default; }
.grafico.sopra .barra { opacity: .35; } .grafico.sopra .barra.evidenza { opacity: 1; }
.grafico .asse { stroke: var(--linea-forte); stroke-width: 1; }
.grafico .griglia-linea { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 3; }
.grafico text { font-size: 11px; fill: var(--testo-3); font-family: inherit; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--testo-2); margin-bottom: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tip-grafico { position: absolute; pointer-events: none; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--ombra); padding: 8px 10px; font-size: 12.5px; min-width: 150px; z-index: 5; }
.tip-grafico b { display: block; margin-bottom: 4px; }
.tip-grafico .r { display: flex; justify-content: space-between; gap: 14px; }
.tip-grafico .r span { display: inline-flex; align-items: center; gap: 6px; color: var(--testo-2); }
.albero td.liv { white-space: nowrap; }
.albero .rientro { display: inline-block; }
.formset-riga { border: 1px solid var(--linea); border-radius: var(--r-m); padding: 14px; margin-bottom: 10px; position: relative; }
.formset-riga .campi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.formset-riga .togli-riga { position: absolute; top: 10px; right: 10px; }
.netto { font-variant-numeric: tabular-nums; font-weight: 600; }
.filtri { display: flex; gap: 8px; flex-wrap: wrap; }
.filtri select { width: auto; max-width: 260px; }

/* ---------------------------------------------------------------- fase 3: ordini */
.avviso-cliente { display: flex; gap: 12px; align-items: flex-start; background: var(--ambra-sf); border: 1px solid #f6e0b5; color: var(--inchiostro); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 16px; }
.avviso-cliente svg { color: var(--ambra); margin-top: 2px; }
.semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.riga .tranche { display: inline-flex; align-items: center; gap: 5px; }
.riga .tranche select { height: 24px; width: auto; padding: 0 6px; font-size: 12px; border-radius: 6px; }
.riga .mq-box { display: inline-flex; align-items: center; gap: 5px; }
.riga .mq-box input { height: 24px; width: 70px; padding: 0 6px; font-size: 12px; border-radius: 6px; text-align: right; }
.disp .furgone { width: 16px; height: 16px; }
.disp .furgone.verde { color: #16a34a; } .disp .furgone.arancio { color: #d97706; } .disp .furgone.rosso { color: #dc2626; }
.filtri-avanzati { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: -6px 0 16px; }
.filtri-avanzati label { margin-bottom: 3px; }

/* ---------------------------------------------------------------- fase 4: fornitori */
form.sola-lettura input:disabled, form.sola-lettura select:disabled, form.sola-lettura textarea:disabled {
  background: transparent; border-color: transparent; color: var(--inchiostro); padding-left: 0; opacity: 1; -webkit-text-fill-color: var(--inchiostro);
}
form.sola-lettura select:disabled { appearance: none; }
form.sola-lettura .scelta:has(input:disabled) { border-color: transparent; padding-left: 0; }
.vuoto-lettura { display: none !important; }
form.sola-lettura .campi, form.sola-lettura .campi-2, form.sola-lettura .campi-3 { row-gap: 6px; }
form.sola-lettura .campi label, form.sola-lettura .campi-2 label, form.sola-lettura .campi-3 label { font-size: 12px; color: var(--testo-3); margin-bottom: 0; }
form.sola-lettura .campi label .debole { display: none; }
form.sola-lettura .aiuto { display: none; }
form.sola-lettura input:disabled, form.sola-lettura select:disabled { min-height: 0; height: auto; padding-top: 2px; padding-bottom: 2px; font-weight: 500; }
form.sola-lettura textarea:disabled { resize: none; min-height: 0; padding-top: 2px; field-sizing: content; }
form.sola-lettura .prefisso-tel:disabled { max-width: 64px; padding-right: 0; }
.segnaposto-lettura { padding: 4px 0 0; }
.s-attesa_conferma { background: var(--ambra-sf); color: var(--ambra); }
.tappa { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.tappa:last-child { border-bottom: 0; }
.tappa .n { width: 28px; height: 28px; border-radius: 50%; background: var(--inchiostro); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.proposta-giro { border: 1px solid var(--linea); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 12px; }
@media print {
  .laterale, .barra-alta, .testata-mobile, .non-stampare, .cassetto, #velo { display: none !important; }
  .app { display: block; } .contenuto { padding: 0; max-width: none; }
  .pannello { border: 0; padding: 0; }
}

/* ---------------------------------------------------------------- fase 6: prenotazioni */
.voce-prenotazione { display: block; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; }
.voce-prenotazione:hover { background: var(--hover); }
.settimana { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; }
.giorno-cal { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 10px; min-height: 220px; }
.giorno-cal.oggi { border-color: var(--inchiostro); }
.giorno-cal h3 { font-size: 13px; margin: 0 0 8px; display: flex; justify-content: space-between; }
.evento-cal { --col: var(--testo-3); display: block; padding: 7px 8px; border-radius: 8px; margin-bottom: 6px; font-size: 12.5px; background: var(--hover); }
.evento-cal.consegna { --col: var(--blu); } .evento-cal.ritiro { --col: var(--verde); } .evento-cal.appuntamento { --col: var(--ambra); }
.evento-cal b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--col); margin-right: 6px; vertical-align: 1px; }
.evento-cal.richiesta { background: var(--ambra-sf); } .evento-cal.fatta { opacity: .55; }
.evento-cal b { display: block; font-weight: 600; }
.slot-griglia { display: grid; gap: 10px; }
.slot-giorno { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.slot-giorno .nome { width: 130px; font-weight: 500; font-size: 13.5px; }
.slot-giorno label { margin: 0; }
.slot-giorno input { display: none; }
.slot-giorno span.slot { display: inline-block; padding: 6px 10px; border: 1px solid var(--linea-forte); border-radius: 8px; cursor: pointer; font-size: 13px; }
.slot-giorno input:checked + span.slot { background: var(--inchiostro); color: #fff; border-color: var(--inchiostro); }
@media (max-width: 700px) { .slot-giorno .nome { width: 100%; } }

/* help-desk: conversazione */
.conversazione{display:flex;flex-direction:column;gap:10px}
.bolla{max-width:85%;padding:10px 13px;border-radius:var(--r-m);border:1px solid var(--linea);background:var(--carta);white-space:pre-line;overflow-wrap:anywhere}
.bolla.cliente{align-self:flex-start;background:var(--tela)}
.bolla.noi{align-self:flex-end;background:var(--blu-sf);border-color:var(--linea-forte)}
.bolla .chi-bolla{display:block;font-size:12px;color:var(--testo-3);margin-bottom:4px;white-space:normal}

/* fase 8: editor dei modelli di stampa */
.contenuto:has(> .ed){max-width:none;padding:0}
.ed{display:flex;flex-direction:column;height:calc(100vh - 58px);min-height:520px}
.ed-barra{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--linea);background:var(--carta);flex-wrap:wrap}
.ed-barra .ed-nome{width:min(300px,40vw);flex:0 1 auto;font-weight:600;border-color:transparent;background:transparent}
.ed-nome:hover,.ed-nome:focus{border-color:var(--linea-forte);background:var(--carta)}
.ed-spazio{flex:1}
.ed-esempio{display:flex;align-items:center;gap:6px;font-size:13px}.ed-esempio select{max-width:220px;height:32px;width:auto}
.ed-corpo{display:grid;grid-template-columns:230px 1fr 270px;flex:1;min-height:0}
.ed-palette,.ed-proprieta{overflow:auto;padding:14px;background:var(--carta);border-right:1px solid var(--linea)}
.ed-proprieta{border-right:0;border-left:1px solid var(--linea)}
.ed-palette h3,.ed-proprieta h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--testo-3);margin:0 0 6px}
.ed-pezzi{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ed-pezzo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--linea);border-radius:var(--r-s);background:var(--carta);cursor:grab;font-size:12.5px;user-select:none}
.ed-pezzo:hover{border-color:var(--linea-forte);background:var(--hover)}
.ed-pezzo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.ed-campi{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.ed-campo{text-align:left;padding:5px 8px;border-radius:6px;font-size:12.5px;cursor:grab;border:0;background:none;color:var(--inchiostro)}
.ed-campo:hover{background:var(--hover)}.ed-campo code{font-size:11px;color:var(--testo-3);display:block}
.ed-area{overflow:auto;background:#d9d9de;padding:40px;position:relative}
.ed-foglio{position:relative;background:#fff;margin:0 auto;box-shadow:0 2px 12px rgba(0,0,0,.15);color:#18181b;line-height:1.3}
.ed-foglio.griglia{background-image:radial-gradient(circle,#d4d4d8 .6px,transparent .7px);background-color:#fff}
.ed-el{position:absolute;box-sizing:border-box;overflow:hidden;cursor:move;outline:1px dashed transparent}
.ed-el:hover{outline-color:#a1a1aa}
.ed-el.sel{outline:1.5px solid var(--blu);overflow:visible;z-index:5}
.ed-el .dentro{width:100%;height:100%;overflow:hidden}
.ed-el .testo{white-space:pre-line;overflow-wrap:anywhere}
.ed-el .campo-vuoto{background:#eef3ff;color:var(--blu);border-radius:2px}
.ed-el svg,.ed-el img{width:100%;height:100%;display:block;pointer-events:none}
.ed-el .logo-svg{max-width:none}
.ed-el table{width:100%;border-collapse:collapse;table-layout:fixed}
.ed-el th{text-align:left;font-weight:600;padding:.25em .35em;border-bottom:1px solid #d4d4d8}
.ed-el td{padding:.25em .35em;border-bottom:1px solid #eee;vertical-align:top;overflow-wrap:anywhere}
.ed-el .d{text-align:right}
.ed-el .tot td{font-weight:700;border-top:1px solid #18181b}
.ed-maniglia{position:absolute;width:10px;height:10px;background:#fff;border:1.5px solid var(--blu);border-radius:2px;display:none}
.ed-el.sel .ed-maniglia{display:block}
.ed-maniglia.se{right:-6px;bottom:-6px;cursor:nwse-resize}.ed-maniglia.e{right:-6px;top:calc(50% - 5px);cursor:ew-resize}
.ed-maniglia.s{bottom:-6px;left:calc(50% - 5px);cursor:ns-resize}
.ed-guida{position:absolute;background:#e11d48;z-index:9;pointer-events:none}.ed-guida.v{width:1px;top:0;bottom:0}.ed-guida.o{height:1px;left:0;right:0}
.ed-proprieta .campi{grid-template-columns:1fr 1fr;gap:8px}
.ed-proprieta textarea{min-height:90px;font-family:inherit}
.ed-colonne{display:flex;flex-direction:column;gap:4px}
.ed-colonne label{display:flex;align-items:center;gap:6px;font-size:13px;margin:0;cursor:grab}
.ed-allinea{display:flex;gap:4px}.ed-allinea button.attivo{background:var(--attivo)}
@media (max-width:1000px){.ed-corpo{grid-template-columns:1fr}.ed-palette,.ed-proprieta{max-height:none}.ed{height:auto}}
@media (max-width:1500px){.ed-tipo{display:none}.ed-esempio select{max-width:170px}.ed-barra .ed-nome{width:min(240px,30vw)}}

/* fase 11: cassa (anche su tablet) */
.contenuto:has(> .cassa){max-width:none}
.cassa-testa{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cassa-schede{margin:0;border:0;display:inline-flex;background:var(--barra);border-radius:var(--r-m);padding:3px;gap:2px}
.cassa-schede button{font-size:15px;padding:9px 18px;border:0;border-radius:9px;background:transparent;cursor:pointer;color:var(--testo-2);font-weight:500}
.cassa-schede button.attiva{background:var(--carta);color:var(--inchiostro);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cassa-corpo{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.cassa-cerca{display:flex;align-items:center;gap:8px;border:1.5px solid var(--linea-forte);border-radius:var(--r-m);padding:0 12px;background:var(--carta)}
.cassa-cerca input{border:0;height:52px;font-size:18px;background:transparent;outline:none;box-shadow:none}
.cassa-risultati{border:1px solid var(--linea);border-radius:var(--r-m);margin-top:6px;max-height:340px;overflow:auto;background:var(--carta)}
.cassa-risultati button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--linea);background:none;font-size:15px;cursor:pointer;color:var(--inchiostro)}
.cassa-risultati button:hover,.cassa-risultati button:focus{background:var(--hover);outline:none}
.cassa-risultati .sec{display:block;font-size:12.5px;color:var(--testo-3)}
.cassa-righe{margin-top:12px}
.cassa-righe td{vertical-align:middle}
.cassa-righe input{height:40px;text-align:right;font-size:15px}
.cassa-q{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.cassa-q button{width:36px;height:40px;border-radius:8px;border:1px solid var(--linea-forte);background:var(--carta);font-size:18px;cursor:pointer}
.cassa-q input{width:64px}
.cassa-paga{position:sticky;top:76px;display:flex;flex-direction:column;gap:10px}
.cassa-totale{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0 10px;border-bottom:1px solid var(--linea)}
.cassa-totale b{font-size:34px;letter-spacing:-.02em}
.cassa-metodi{display:grid;gap:8px}
.cassa-metodo{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center}
.cassa-metodo button{height:46px;border-radius:var(--r-m);border:1px solid var(--linea-forte);background:var(--carta);font-size:15px;font-weight:600;cursor:pointer;text-align:left;padding:0 12px;color:var(--inchiostro)}
.cassa-metodo button:hover{background:var(--hover)}
.cassa-metodo input{height:46px;font-size:17px;text-align:right}
.cassa-resto{display:flex;justify-content:space-between;align-items:baseline;background:var(--verde-sf);color:var(--verde);border-radius:var(--r-m);padding:10px 12px}
.cassa-resto b{font-size:24px}
.cassa-doc{display:flex;gap:8px}.cassa-doc .scelta{flex:1;margin:0}
.cassa-concludi{height:58px;font-size:18px;justify-content:center}
.cassa-cliente{position:relative}
@media (max-width:1250px){.cassa-corpo{grid-template-columns:1fr 300px}.cassa-righe input{height:36px}.cassa-q input{width:52px}}
@media (max-width:900px){.cassa-corpo{grid-template-columns:1fr}.cassa-paga{position:static}}
.allegati-pronti{display:flex;flex-direction:column;gap:6px}
.gruppo-allegati{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.gruppo-allegati .tenue{font-size:12px;width:100%}
.gruppo-allegati .spunta{margin:0;font-size:13.5px}
.tel-con-prefisso{display:flex;gap:6px}
.tel-con-prefisso .prefisso-tel{width:auto;flex:0 0 auto;max-width:110px;padding-right:22px}
.tel-con-prefisso input{flex:1;min-width:0}
/* bozze automatiche e connessione */
.stato-bozza{margin-left:10px;font-size:12.5px;color:var(--testo-3)}
.stato-bozza.attesa{color:var(--ambra);font-weight:600}
.barra-bozza{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--blu-sf);border:1px solid var(--linea-forte);border-radius:var(--r-m);padding:10px 14px;margin-bottom:14px}
.avviso-linea{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:300;background:var(--ambra);color:#fff;padding:10px 16px;border-radius:var(--r-m);box-shadow:var(--ombra);font-weight:600;font-size:14px;max-width:calc(100vw - 32px)}
.riga.opzionale{background:repeating-linear-gradient(135deg,transparent 0 8px,var(--hover) 8px 16px)}
.riga .facoltativo{font:inherit;font-size:12px;color:var(--testo-2);background:none;border:1px dashed var(--linea-forte);border-radius:999px;padding:1px 9px;cursor:pointer}
.riga .facoltativo.attivo{background:var(--ambra-sf);color:var(--ambra);border-style:solid;border-color:#f6e0b5}
tr.riga-facoltativa td{color:var(--testo-2)}

/* pagina aperta in una finestra sopra un'altra (es. nuovo articolo dall'ordine) */
body.popup .laterale, body.popup .barra-alta, body.popup .testata-mobile { display: none !important; }
body.popup .app { display: block; }
body.popup .contenuto { padding: 16px 20px 40px; }
.dlg-popup { width: min(1100px, calc(100vw - 24px)); height: calc(100vh - 40px); padding: 0; }
.dlg-popup iframe { width: 100%; height: calc(100% - 48px); border: 0; }
.dlg-popup .testa-popup { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--linea); height: 48px; }
.zona-file{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 20px;border:2px dashed var(--linea-forte);background:var(--carta)}
.zona-file.sopra{border-color:var(--blu);background:var(--blu-sf)}
.zona-file.caricamento{opacity:.6;pointer-events:none}
.griglia-numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.griglia-numeri div{border:1px solid var(--linea);border-radius:var(--r-m);padding:12px;display:flex;flex-direction:column}
.griglia-numeri b{font-size:24px}.griglia-numeri span{color:var(--testo-3);font-size:13px}
/* nelle griglie le colonne non si allargano per il contenuto (tabelle larghe) */
.ordine-layout > *, .griglia > *, .cassa-corpo > * { min-width: 0; }

/* aiuto sul punto interrogativo: si apre passando il mouse o toccandolo */
.punto-aiuto { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--hover); color: var(--testo-2); font-size: 11.5px; font-weight: 600; cursor: help; vertical-align: 1px; margin-left: 3px; }
.punto-aiuto:hover::after, .punto-aiuto:focus::after { content: attr(data-testo); position: absolute; z-index: 30; right: -8px; bottom: calc(100% + 6px);
  width: min(280px, 80vw); padding: 9px 11px; border-radius: 9px; background: var(--inchiostro); color: #fff; font-size: 12.5px; font-weight: 400;
  line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,.18); white-space: normal; text-align: left; }
.segmenti-3 { display: flex; }
.segmenti-3 label { flex: 1; text-align: center; padding: 6px 6px; }
.pannello-note { padding-top: 10px; padding-bottom: 10px; }
.pannello-note .bottoni-note { display: flex; gap: 6px; flex-wrap: wrap; }
.pannello-note .bottoni-note:not(:has(button:not([hidden]))) { display: none; }
.pannello-note .campi:not(:has(> div:not([hidden]))) { display: none; }
.pannello-note .bottoni-note + .campi { margin-top: 10px; }
.data-spostata { color: var(--rosso); font-weight: 600; }
.pannello-allarme { border-color: #f3c4c4; overflow: hidden; }
.avviso-data { display: grid; gap: 2px; background: var(--rosso-sf); color: var(--rosso); border-radius: 9px; padding: 9px 11px; margin: 6px 0 8px; font-size: 13px; }
.avviso-data span { color: var(--testo-2); }
.tabella-scorre { overflow-x: auto; }
tr.riga-allarme td { background: var(--rosso-sf); }
.gruppi-da-fare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gruppi-da-fare > div { min-width: 0; display: grid; gap: 6px; align-content: start; }
.gruppi-da-fare h3 { margin: 0 0 2px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); }
.voce-da-fare { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--hover); color: var(--inchiostro); text-decoration: none; }
.voce-da-fare b { min-width: 26px; text-align: center; font-size: 16px; }
.voce-da-fare.ambra b { color: var(--ambra); }
.voce-da-fare.rosso { background: var(--rosso-sf); }
.voce-da-fare.rosso b { color: var(--rosso); }
.voce-da-fare:hover { filter: brightness(.97); }
.voce.sotto-voce { padding-left: 30px; font-size: 13px; }
.voce.sotto-voce .ic { width: 15px; height: 15px; }
/* scheda articolo */
.campi.campi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campi.campi-3 > .largo { grid-column: 1 / -1; }
@media (max-width: 900px) { .campi.campi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .campi.campi-3 { grid-template-columns: minmax(0, 1fr); } }
.per-unita { display: contents; }
.per-unita[hidden] { display: none; }
.con-bottone { display: flex; gap: 6px; }
.con-bottone > select, .con-bottone > input { flex: 1; min-width: 0; }
.aiuto.nuovo { color: var(--verde, #15803d); }
.riga-fornitore { grid-template-columns: minmax(170px, 2fr) repeat(5, minmax(80px, 1fr)) minmax(100px, 1.1fr) !important; }
@media (max-width: 900px) { .riga-fornitore { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .riga-fornitore > div:first-child { grid-column: 1 / -1; } }
.piede-fornitore { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.piede-fornitore > div { flex: 0 0 auto; }
.piede-fornitore details { flex: 1; min-width: 220px; }
.piede-fornitore .scelta { margin: 0; padding: 6px 10px; }
.togli-forn { margin-left: auto; color: var(--rosso); }

/* griglia articoli: colonne a scelta */
.barra-griglia { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.scegli-colonne { position: relative; }
.scegli-colonne summary { list-style: none; }
.menu-colonne { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; gap: 4px; width: 240px; }
#griglia-articoli.senza-codice [data-col=codice], #griglia-articoli.senza-marchio [data-col=marchio], #griglia-articoli.senza-categoria [data-col=categoria], #griglia-articoli.senza-formato [data-col=formato], #griglia-articoli.senza-fornitore [data-col=fornitore], #griglia-articoli.senza-ean [data-col=ean], #griglia-articoli.senza-prezzo [data-col=prezzo], #griglia-articoli.senza-costo [data-col=costo], #griglia-articoli.senza-giacenza [data-col=giacenza], #griglia-articoli.senza-disponibili [data-col=disponibili], #griglia-articoli.senza-ubicazione [data-col=ubicazione] { display: none; }
#griglia-articoli:not(.senza-codice) [data-col-alt=codice], #griglia-articoli:not(.senza-formato) [data-col-alt=formato] { display: none; }
.dati-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.dati-extra dt { font-size: 12px; color: var(--testo-2); }
.dati-extra dd { margin: 2px 0 0; font-weight: 500; }
.lista-controlli { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lista-controlli li { color: var(--testo); }
.mq-box .sfrido { display: inline-flex; gap: 4px; align-items: center; margin: 0 4px; font-size: inherit; font-weight: 400; }
.mq-box .sfrido input { width: auto; height: auto; }
.incasso-consegna { background: var(--ambra-sf); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.qr-ordine { width: 64px; height: 64px; margin-top: 8px; }
.qr-ordine svg { width: 100%; height: 100%; }
.conta-lettore { display: grid; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--hover); }
tr.letto td { background: var(--verde-sf); }
tr.in-piu td { background: var(--ambra-sf); }
.blocco-firma { width: 100%; height: auto; aspect-ratio: 600 / 220; border: 1px dashed var(--linea); border-radius: 10px; background: #fff; touch-action: none; }
.firma-salvata { max-width: 100%; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.elenco-avvisi { display: grid; gap: 8px; }
.avviso-cliente-imp { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.avviso-cliente-imp summary { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; cursor: pointer; list-style: none; }
.avviso-cliente-imp summary .tenue { font-size: 12.5px; }
#conta-notifiche { pointer-events: none; }
/* moduli a due colonne fisse (nuovo cliente) e indirizzo CAP | Città | Provincia */
.campi.campi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campi.campi-2 > .largo, .campi.campi-indirizzo > .largo { grid-column: 1 / -1; }
.campi.campi-indirizzo { grid-template-columns: 110px minmax(0, 1fr) 90px; }
.campi.campi-indirizzo select[data-paesi] { max-width: 260px; }
@media (max-width: 560px) { .campi.campi-2 { grid-template-columns: minmax(0, 1fr); } .campi.campi-indirizzo { grid-template-columns: 90px minmax(0, 1fr) 70px; } }
.tel-con-prefisso .prefisso-tel { max-width: 92px; }
/* catalogo nella scheda ordine */
.dlg-catalogo { width: min(1080px, calc(100vw - 24px)); height: min(760px, calc(100vh - 24px)); padding: 0; display: none; flex-direction: column; }
.dlg-catalogo[open] { display: flex; }
.testa-catalogo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.testa-catalogo .tenue { flex: 1; font-size: 13px; }
.corpo-catalogo { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.filtri-catalogo { overflow-y: auto; padding: 14px 16px; border-right: 1px solid var(--linea); display: grid; gap: 10px; align-content: start; }
.risultati-catalogo { overflow-y: auto; padding: 10px 16px; }
.voce-catalogo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 64px auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--linea); }
.voce-catalogo .testo small { display: block; color: var(--testo-2); font-size: 12.5px; }
.voce-catalogo .testo small.ok { color: var(--verde); }
.voce-catalogo .prezzo { text-align: right; font-weight: 600; white-space: nowrap; }
.voce-catalogo .prezzo small { display: block; font-weight: 400; color: var(--testo-2); font-size: 12px; }
.voce-catalogo input { text-align: right; height: 32px; }
.legenda-catalogo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--linea); font-size: 12.5px; }
.legenda-catalogo .pallino { margin-left: 8px; }
@media (max-width: 760px) {
  .corpo-catalogo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .filtri-catalogo { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--linea); }
  .voce-catalogo { grid-template-columns: auto minmax(0, 1fr) auto; }
  .voce-catalogo input, .voce-catalogo button { grid-column: span 1; }
}
.dlg-popup .testa-popup { gap: 8px; }
/* scheda ordine: quantità con l'unità, scheda prodotto, consegna, IVA, note */
.riga .q { position: relative; }
.riga .q input { padding-right: 28px; }
.riga .unita-q { position: absolute; right: 8px; top: 19px; transform: translateY(-50%); font-size: 11.5px; color: var(--testo-3); pointer-events: none; }
.riga .meta .scatole { color: var(--inchiostro); font-weight: 500; }
.riga .meta .apri-scheda { display: inline-flex; gap: 4px; align-items: center; color: var(--blu, #1d4ed8); text-decoration: none; }
.riga .meta .apri-scheda .ic { width: 13px; height: 13px; }
.segmenti.segmenti-pieni { display: flex; width: 100%; }
.segmenti.segmenti-pieni label { flex: 1; text-align: center; padding: 7px 6px; }
.riga-iva { display: flex; gap: 8px; align-items: baseline; margin-top: 12px; font-size: 13.5px; }
.riga-iva b { flex: 1; font-weight: 500; }
.riga-iva .link { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; }
.avviso-iva { margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: var(--ambra-sf); color: var(--ambra); font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.avviso-iva.ok { background: var(--verde-sf); color: var(--verde); }
.nota-interna textarea, .nota-interna-mostra { background: #fff8db; border-color: #f1df9a; }
.nota-interna-mostra { border: 1px solid #f1df9a; border-radius: 10px; padding: 10px 12px; }
.riga-iva .link { color: var(--blu); }
.decidi-consegna { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ambra-sf); font-size: 13px; }
.segmenti.segmenti-pieni a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; color: var(--testo-2); text-decoration: none; font-weight: 500; }
.segmenti.segmenti-pieni a.scelto { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 2px rgba(24,24,27,.1); }
.segmenti.segmenti-pieni label { white-space: nowrap; font-size: 13px; padding: 7px 4px; }
.spunte-articolo { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.spunte-articolo .spunta { margin: 0; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.abbinati { display: grid; gap: 0; }
.riga-abbinato { display: grid; grid-template-columns: minmax(180px, 2fr) 110px 130px 110px minmax(150px, 1.5fr) 36px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.riga-abbinato small { display: block; color: var(--testo-2); font-size: 12px; }
.riga-abbinato input { height: 34px; }
.intestazione-abbinati { font-size: 12px; color: var(--testo-2); padding-top: 0; }
.abbinati:not(:has(.riga-abbinato:not(.intestazione-abbinati))) .intestazione-abbinati { display: none; }
@media (max-width: 900px) { .riga-abbinato { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .intestazione-abbinati { display: none; } }
.costo-certo { display: flex; gap: 6px; align-items: center; }
.costo-certo label { margin: 0; white-space: nowrap; font-size: 13px; }
.costo-certo input { width: auto; height: 34px; }
.menu-codici { position: relative; }
.menu-codici summary { list-style: none; }
.menu-tendina { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; display: grid; min-width: 220px; }
.menu-tendina button { background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13.5px; }
.menu-tendina button:hover { background: var(--hover); }
.aggiunta[data-agg-riga=sconto] { grid-template-columns: 1fr auto 96px 32px; }
.segmenti.mini { padding: 2px; }
.riga-peso { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.riga-peso label { margin-bottom: 0; }
.riga-peso .segmenti label { font-weight: 500; }
.segmenti.mini label { padding: 3px 9px; font-size: 13px; }
.link-azione { display: inline-flex; gap: 4px; align-items: center; background: none; border: 0; padding: 2px 4px; color: var(--blu); font: inherit; font-size: 13px; cursor: pointer; }
.link-azione .ic { width: 13px; height: 13px; }
.link-azione:hover { text-decoration: underline; }
.aggiunte { gap: 12px; margin: 8px 0 2px; }
.chiudi-nota { position: absolute; top: -2px; right: 0; }
.pannello-note .campi > div { position: relative; }
/* ordine fornitore */
.voci-of { margin-top: 14px; }
.voci-of h3 { font-size: 13.5px; margin: 0 0 6px; }
.voce-of { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; max-width: 760px; }
.voce-of [name=m_nome] { flex: 1 1 180px; min-width: 0; }
.voce-of [name=m_tipo] { width: 64px; }
.voce-of [name=m_valore], .voce-of [name=m_soglia] { width: 90px; text-align: right; }
.voce-of [name=m_cond] { width: auto; flex: 0 1 190px; }
.voce-of.spenta input[type=text], .voce-of.spenta select { opacity: .45; text-decoration: line-through; }
.spunta-voce { display: inline-flex; align-items: center; padding: 0 2px; }
.voce-of input, .voce-of select { height: 32px; }
.aggiungi-of { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.aggiungi-of input { height: 34px; }
.azioni-consegna { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.azioni-consegna details { flex: 0 0 auto; }
.azioni-consegna details[open] { flex: 1 1 100%; order: 9; }
.azioni-consegna summary { list-style: none; }
details.in-linea { display: inline; }
details.in-linea summary { display: inline-flex; list-style: none; }
.proposte { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.proposta { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.proposta { overflow: hidden; }
.proposta.solo-riordino { background: var(--hover); }
.testa-proposta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.testa-proposta .tenue { font-size: 12.5px; }
.voci-proposta { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.voci-proposta li { cursor: help; }
.voci-proposta .sec { display: block; font-size: 12px; color: var(--testo-3); }
.avviso-proposta { margin: 0; padding: 6px 9px; background: var(--ambra-sf); color: var(--ambra); border-radius: 8px; font-size: 12.5px; }
.chip-mini { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--hover); color: var(--testo-2); }

/* ---------------------------------------------------------------- oggi in magazzino */
.tasti-magazzino { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tasto { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 18px; border-radius: var(--r-l); border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro); font: inherit; cursor: pointer; text-decoration: none; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.tasto:hover { border-color: var(--linea-forte); box-shadow: var(--ombra); transform: translateY(-1px); }
.tasto .ic { width: 30px; height: 30px; margin-bottom: 6px; }
.tasto b { font-size: 16px; font-weight: 600; }
.tasto > span:not(.conta) { color: var(--testo-2); font-size: 13px; }
.tasto .conta { position: absolute; top: 14px; right: 14px; font-size: 12px; background: var(--inchiostro); color: #fff; border-radius: 999px; padding: 0 8px; line-height: 20px; }
.tasto.rosso .ic { color: var(--rosso); }
.colonne-oggi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.colonne-oggi .pannello { margin: 0; }
.voce-oggi { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.voce-oggi:last-child { border-bottom: 0; }
.voce-oggi > div { min-width: 0; }
.voce-oggi .stato { margin-top: 4px; }
.voce-oggi .btn { flex: 0 0 auto; }
.sotto-titolo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-3); margin: 14px 0 2px; }
.sotto-titolo.rosso { color: var(--rosso); }
.dlg-magazzino { width: min(560px, calc(100vw - 24px)); }
.dlg-magazzino .corpo { display: grid; gap: 12px; }
.lista-dlg { display: grid; max-height: min(52vh, 460px); overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--r-m); }
.riga-dlg { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--linea); color: inherit; text-decoration: none; }
.riga-dlg:last-child { border-bottom: 0; }
.riga-dlg:hover { background: var(--hover); }
.riga-dlg > span:first-child { flex: 1; min-width: 0; }
.riga-dlg .ic { transform: rotate(180deg); color: var(--testo-3); flex: 0 0 auto; }
.riga-dlg[hidden] { display: none; }
.chip-mini.rosso { background: var(--rosso-sf); color: var(--rosso); }
.chip-mini.verde { background: var(--verde-sf); color: var(--verde); }
.campo-cerca-articolo { position: relative; }
.info-articolo { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--hover); font-size: 14px; line-height: 1.5; }
.chip-scelta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip-scelta .chip-mini { cursor: pointer; border: 1px solid var(--linea); font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--carta); }
.chip-scelta .chip-mini.attiva { background: var(--inchiostro); color: #fff; border-color: var(--inchiostro); }
.fuori-catalogo { margin-top: 8px; }
.fuori-catalogo > summary { list-style: none; cursor: pointer; display: inline-flex; }
.fuori-catalogo > summary::-webkit-details-marker { display: none; }
.btn.grande { padding: 12px 20px; font-size: 15px; }

/* ---------------------------------------------------------------- segnalazioni */
.schede-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.schede-filtro a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--testo-2); text-decoration: none; font-size: 14px; background: var(--carta); }
.schede-filtro a.attiva { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.schede-filtro a.attiva .contatore { background: rgba(255,255,255,.2); color: #fff; }
.schede-filtro .contatore { font-size: 12px; background: var(--hover); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.s-sg-aperta { background: var(--ambra-sf); color: var(--ambra); }
.s-sg-inviata { background: var(--blu-sf); color: var(--blu); }
.s-sg-accettata, .s-sg-chiusa { background: var(--verde-sf); color: var(--verde); }
.s-sg-respinta { background: var(--rosso-sf); color: var(--rosso); }
.scelte-tipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.scelte-tipo .scelta { padding: 9px 10px; }
.scelte-tipo .scelta { margin: 0; }
.anteprime-foto, .galleria { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.anteprime-foto figure { position: relative; margin: 0; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--hover); display: grid; place-items: center; font-size: 11px; text-align: center; }
.anteprime-foto img, .galleria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anteprime-foto figure button { position: absolute; top: 2px; right: 2px; background: rgba(255,255,255,.9); }
.galleria a { width: 140px; height: 140px; border-radius: 10px; overflow: hidden; background: var(--hover); display: grid; place-items: center; color: inherit; font-size: 12px; text-align: center; padding: 0; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi .pannello { margin: 0; display: grid; gap: 2px; }
.kpi b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.griglia-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.griglia-stat .pannello { margin: 0; }
.barra-oriz { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr 34px 84px; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.barra-oriz .traccia { height: 8px; background: var(--hover); border-radius: 4px; overflow: hidden; }
.barra-oriz .traccia span { display: block; height: 100%; background: var(--blu); border-radius: 0 4px 4px 0; min-width: 2px; }
.barra-oriz .num { text-align: right; font-variant-numeric: tabular-nums; }
.colonne-mesi { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 170px; align-items: end; }
.colonne-mesi .col { display: grid; grid-template-rows: 18px 1fr 18px; height: 100%; text-align: center; font-size: 11px; color: var(--testo-2); }
.colonne-mesi .barra { align-self: end; width: 70%; justify-self: center; background: var(--blu); border-radius: 4px 4px 0 0; min-height: 1px; }
.colonne-mesi .v { color: var(--inchiostro); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .barra-oriz { grid-template-columns: 1fr 1fr 28px; }
  .barra-oriz .num.tenue { display: none; }
  .tasto { padding: 14px; }
}

/* ---------------------------------------------------------------- fase 15: ordini, fornitori, rimborsi, impostazioni */
.link-indietro { display: inline-flex; align-items: center; gap: 6px; color: var(--testo-2); text-decoration: none; font-size: 13.5px; margin-bottom: 6px; }
.link-indietro:hover { color: var(--inchiostro); }
.link-indietro .ic { width: 16px; height: 16px; }
.banner-approvazione { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 14px;
  border: 1px solid #f1df9a; background: var(--ambra-sf); border-radius: var(--r-m); }
.banner-approvazione > div { display: grid; gap: 2px; }
.banner-approvazione form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.conti .r.escluso { color: var(--testo-3); font-size: 13px; }
.ricevimenti { margin-top: 10px; font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.da-confermare { font-size: 12px; }
.da-confermare-mini { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--ambra); background: var(--ambra-sf); border-radius: 6px; padding: 0 6px; }
.elenco-pause { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
tr.passata td { color: var(--testo-3); }
tr.riga-avviso td { background: var(--ambra-sf); }
.chip-difetto { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: #fff1e6; color: #9a3412; text-decoration: none; margin: 2px 4px 0 0; border: 1px solid #fed7aa; }
a.chip-difetto:hover { background: #ffe4cc; }
.foto-difetto { max-width: 980px; }
.testa-foto { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.prezzo-difetto b { font-size: 22px; }
.descrizione-difetto { white-space: pre-line; font-size: 15px; margin: 10px 0 14px; }
.galleria-grande { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.galleria-grande a { display: block; border-radius: var(--r-m); overflow: hidden; background: var(--hover); aspect-ratio: 4 / 3; }
.galleria-grande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.riga-pezzo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; align-items: center; }
.riga-pezzo [name$=desc], .riga-pezzo [name=descrizione] { flex: 2 1 200px; }
.riga-pezzo [name$=cod], .riga-pezzo [name=codice] { flex: 1 1 120px; }
.riga-pezzo [name$=_q], .riga-pezzo [name=quantita] { width: 70px; text-align: right; }
.riga-pezzo select { width: auto; }
.riga-pezzo [name$=costo], .riga-pezzo [name=costo] { width: 120px; }
.pag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pag-ok { background: var(--verde-sf); color: var(--verde); }
.pag-acconto { background: var(--ambra-sf); color: var(--ambra); }
.pag-no { background: var(--rosso-sf); color: var(--rosso); }
.pag-nessuno { background: var(--hover); color: var(--testo-2); font-weight: 500; }
.ic.mini { width: 13px; height: 13px; }
.stato .ic.mini { margin-left: -2px; }
.pag-testa { text-align: right; }
.riga-modificata td { background: #f0f7ff; }
.chip-modifica { display: inline-block; font-size: 11px; font-weight: 600; color: var(--blu); background: var(--blu-sf); border-radius: 6px; padding: 0 6px; }
.voce-modifica { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.voce-modifica:last-child { border-bottom: 0; }
.testa-modifica { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.voce-modifica ul, .riassunto-modifica { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.mod-nuova { color: var(--verde); } .mod-tolta { color: var(--rosso); text-decoration: line-through; }
.diff-totale { margin-top: 6px; font-size: 14px; }
.diff-totale .su { color: var(--rosso); } .diff-totale .giu { color: var(--verde); }
.dopo-modifica { border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-sf); }
.passi-modifica { display: grid; gap: 10px; margin-top: 12px; }
.passo { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--hover); }
.passo .azioni { margin-top: 4px; }
.passo form { display: flex; gap: 6px; flex-wrap: wrap; }
.avviso-soldi { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--ambra-sf); font-size: 13.5px; }
.motivo-modifica { display: grid; gap: 4px; }
.col-occhio { width: 44px; }
.griglia-anteprima { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
.griglia-anteprima .pannello { margin: 0 0 14px; }
@media (max-width: 860px) { .griglia-anteprima { grid-template-columns: 1fr; } }
.impostazioni-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.indice-impostazioni { position: sticky; top: 16px; display: grid; gap: 2px; }
.indice-impostazioni a { padding: 7px 10px; border-radius: 8px; color: var(--testo-2); text-decoration: none; font-size: 14px; }
.indice-impostazioni a:hover { background: var(--hover); color: var(--inchiostro); }
.contenuto-impostazioni { min-width: 0; }
.contenuto-impostazioni > .pannello { scroll-margin-top: 16px; overflow-x: auto; }
@media (max-width: 900px) { .impostazioni-layout { grid-template-columns: minmax(0, 1fr); } .indice-impostazioni { position: static; display: flex; flex-wrap: wrap; gap: 4px; } .indice-impostazioni a { border: 1px solid var(--linea); font-size: 13px; } }
.schede-link { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.schede-link a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-m); text-decoration: none; color: inherit; background: var(--carta); }
.schede-link a:hover { border-color: var(--linea-forte); box-shadow: var(--ombra); }
.schede-link a span { color: var(--testo-2); font-size: 13px; }

/* ---------------------------------------------------------------- fase 16 */
.titolo-apribile { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
.titolo-apribile::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--testo-3); border-bottom: 2px solid var(--testo-3); transform: rotate(45deg); margin-left: auto; transition: transform var(--t); }
section.chiusa .titolo-apribile::after { transform: rotate(-45deg); }
section.pannello.chiusa > :not(h2):not(.testa-pannello) { display: none !important; }
section.pannello.chiusa > .testa-pannello > :not(h2) { display: none; }
section.pannello.chiusa { padding-bottom: 14px; }
.matrice-permessi td:first-child { min-width: 260px; }
.matrice-permessi th.num { white-space: normal; max-width: 110px; font-size: 12px; }

/* Pagamenti: conferma esplicita, ritardi */
.azioni-pag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.azioni-riga { white-space: nowrap; }
.azioni-riga .btn { margin-left: 4px; }
.riga-ritardo td { background: var(--rosso-sf); }
.testo-rosso { color: var(--rosso); font-weight: 600; }
.riepilogo-pag { background: var(--hover); border-radius: 8px; padding: 10px 12px; margin-top: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.conferma-esplicita { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; align-items: flex-start; }
.avviso-rosso { background: var(--rosso-sf); color: var(--rosso); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.btn.primario.pericolo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
#pagamenti td { overflow-wrap: anywhere; }
#pagamenti .pag-testa { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.incasso-consegna { overflow-wrap: anywhere; }
.riga-scaglione { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.riga-scaglione input { width: 90px; }
.riga-scaglione select { width: auto; }
details.scaglioni { margin-top: 8px; }
.riga.aggiornata { animation: lampo 2.5s; } @keyframes lampo { 0%, 40% { background: var(--ambra-sf); } 100% { background: transparent; } }
.scelta-doc { display: block; font-size: 10.5px; color: var(--testo-2); letter-spacing: .02em; }
.badge-operatore { display: inline-block; margin-top: 3px; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--hover); color: var(--testo-2); font-weight: 500; }
.badge-operatore.mio { background: var(--blu-sf, #e0ecff); color: var(--blu, #1d4ed8); }
.segmenti .conta { font-size: 11px; background: var(--ambra-sf); color: var(--ambra); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.azioni-arrivo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; }
.riga-rotti td { background: var(--rosso-sf); }
.rotti-campi { grid-template-columns: 120px 200px minmax(0, 1fr); }
@media (max-width: 700px) { .rotti-campi { grid-template-columns: minmax(0, 1fr); } }
.avviso-rotta { border-color: var(--rosso); background: var(--rosso-sf); }
.voce-rotta + .voce-rotta { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }
.scelte-rotta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scelte-rotta input[type=text] { flex: 1 1 220px; min-width: 0; }
.numero-rosso { border-color: var(--rosso); } .numero-rosso b { color: var(--rosso); }
.riga-multi { display: flex; align-items: center; gap: 8px; }
.riga-multi > input { flex: none; width: 18px; height: 18px; }
.riga-multi > a { flex: 1; min-width: 0; }
.barra-multi { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.blocco-evasione { margin-bottom: 16px; }
.verifiche-cq .verifica { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.verifiche-cq .verifica > span { flex: 1 1 220px; min-width: 0; }
.elenco-verifiche { list-style: none; padding: 0; margin: 0; }
.elenco-verifiche li { padding: 6px 0; border-bottom: 1px solid var(--linea); }

/* Calendario prenotazioni interattivo */
.barra-calendario { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.calendario-interattivo { grid-template-columns: repeat(6, minmax(170px, 1fr)); }
.fascia-cal { border: 1px solid var(--linea); border-radius: 8px; padding: 6px; margin-bottom: 8px; background: var(--tela, #fafafa); }
.fascia-cal { overflow: hidden; padding-top: 0; }
.fascia-cal .testa-fascia { margin: 0 -6px 6px; padding: 4px 6px; }
.fascia-cal.consegna .testa-fascia { background: var(--blu-sf); color: var(--blu); } .fascia-cal.ritiro .testa-fascia { background: var(--verde-sf); color: var(--verde); }
.fascia-cal.appuntamento .testa-fascia { background: var(--ambra-sf); color: var(--ambra); } .fascia-cal .tipo-fascia { color: inherit; opacity: .85; }
.fascia-cal.piena { background: var(--hover); }
.testa-fascia { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--testo-2); }
.tipo-fascia { font-weight: 500; color: var(--testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fascia-cal .evento-cal { margin-bottom: 4px; }
.posto-libero { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; padding: 5px 8px; border: 1px dashed var(--linea-forte); border-radius: 6px; background: transparent; color: var(--testo-2); cursor: pointer; }
.posto-libero:hover { border-color: var(--inchiostro); color: var(--inchiostro); background: var(--carta); }
.piena .posto-libero { color: var(--rosso); border-color: var(--rosso-sf); }
.assenti { font-size: 11.5px; color: var(--ambra); margin: -4px 0 8px; }
.pallino { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
@media (max-width: 700px) { .calendario-interattivo { grid-template-columns: repeat(6, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; } .calendario-interattivo .giorno-cal { scroll-snap-align: start; } }
.dlg-pagamento { padding: 20px; } #dlg-scatola { padding: 20px; }

/* ================================================================ fase 17 */
.griglia-impostazioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.griglia-impostazioni > * { min-width: 0; }
.riquadro-info { background: var(--hover); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; }
.kpi-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.elenco-luoghi { list-style: none; padding: 0; margin: 0; } .elenco-luoghi li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.testo-ambra { color: var(--ambra); font-weight: 600; }
.voce .conta.rossa { background: var(--rosso); }
button.voce { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.voce-ia svg { color: #b4743f; }

/* stato del collega */
.pallino-stato { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--testo-3); vertical-align: middle; flex: none; }
.pallino-stato.disponibile { background: #16a34a; } .pallino-stato.occupato { background: #f59e0b; } .pallino-stato.appuntamento { background: #2563eb; }
.pallino-stato.non_disturbare { background: #dc2626; } .pallino-stato.assente, .pallino-stato.fuori_orario { background: #a1a1aa; }
.avatar { position: relative; }
.avatar .pallino-stato { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid var(--barra); }
.menu-profilo { flex: 1; min-width: 0; position: relative; }
.menu-profilo > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 8px; padding: 4px; }
.menu-profilo > summary::-webkit-details-marker { display: none; }
.menu-profilo > summary:hover { background: var(--hover); }
.voci-profilo { position: absolute; bottom: calc(100% + 8px); left: 0; width: 260px; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(24,24,27,.14); padding: 8px; z-index: 60; }
.voci-profilo .titoletto { font-size: 11.5px; color: var(--testo-3); padding: 4px 8px; text-transform: uppercase; letter-spacing: .04em; }
.voci-profilo button, .voci-profilo a { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; font: inherit; font-size: 13.5px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--inchiostro); text-decoration: none; text-align: left; }
.voci-profilo button:hover, .voci-profilo a:hover { background: var(--hover); }
.voci-profilo .riga-stato { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 13.5px; flex-wrap: wrap; }
.voci-profilo .riga-stato span { margin-left: auto; display: flex; gap: 2px; }
.voci-profilo .riga-stato span button { width: auto; padding: 3px 7px; font-size: 12px; border: 1px solid var(--linea); }
.voci-profilo hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 0; }

/* chat */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; height: calc(100vh - 150px); min-height: 480px; }
.chat > .pannello { margin: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-elenco { overflow-y: auto; }
.chat-voce { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.chat-voce:hover { background: var(--hover); } .chat-voce.attiva { background: var(--attivo); }
.chat-voce .chat-nome { flex: 1; min-width: 0; } .chat-voce .chat-nome b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-voce .conta { background: var(--inchiostro); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 7px; line-height: 18px; }
.avatar.piccolo { width: 32px; height: 32px; }
.chat-testa { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.chat-messaggi { flex: 1; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: min(560px, 85%); background: var(--hover); border-radius: 14px 14px 14px 4px; padding: 8px 12px; align-self: flex-start; }
.msg.mio { align-self: flex-end; background: var(--inchiostro); color: #fff; border-radius: 14px 14px 4px 14px; }
.msg.mio .msg-ora, .msg.mio .msg-etichetta { color: rgba(255,255,255,.7); }
.msg.richiesta { overflow: hidden; padding-top: 0; }
.msg.richiesta .msg-etichetta { margin: 0 -12px 6px; padding: 4px 12px; background: var(--blu-sf); color: var(--blu); }
.msg.richiesta.prio-alta .msg-etichetta { background: var(--ambra-sf); color: var(--ambra); } .msg.richiesta.prio-critica .msg-etichetta { background: var(--rosso-sf); color: var(--rosso); }
.msg.mio.richiesta .msg-etichetta { color: var(--blu); } .msg.mio.richiesta.prio-alta .msg-etichetta { color: var(--ambra); } .msg.mio.richiesta.prio-critica .msg-etichetta { color: var(--rosso); }
.msg.richiesta .msg-autore { padding-top: 6px; }
.msg-autore { display: block; font-size: 12px; font-weight: 600; color: var(--testo-2); }
.msg-etichetta { display: block; font-size: 12px; color: var(--testo-2); margin-bottom: 2px; }
.msg-testo { overflow-wrap: anywhere; } .msg-ora { display: block; font-size: 11px; color: var(--testo-3); margin-top: 3px; }
.msg-azioni { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.chat-scrivi { border-top: 1px solid var(--linea); padding-top: 10px; }
.chat-scrivi textarea { width: 100%; resize: vertical; }
.chat-opzioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.chat-opzioni select { width: auto; }
.avviso-assenza { background: var(--ambra-sf); color: #713f12; border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.lista-spunte { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.solo-telefono { display: none; }
@media (max-width: 800px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: auto; }
  .chat.con-attiva .chat-elenco { display: none; } .chat:not(.con-attiva) .chat-finestra { display: none; }
  .chat-finestra { height: calc(100vh - 140px); } .solo-telefono { display: inline-flex; }
}

/* le mie attività */
.todo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px 12px 10px; border-bottom: 1px solid var(--linea); }
.todo.prio-critica { background: #fef2f2; } .todo.prio-bassa { opacity: .85; }
.todo.fatta { opacity: .6; } .todo.fatta .todo-titolo { text-decoration: line-through; }
.todo-corpo { flex: 1; min-width: 0; } .todo-titolo { font-weight: 500; overflow-wrap: anywhere; }
.todo-note { font-size: 13px; color: var(--testo-2); margin-top: 4px; }
.todo-azioni { display: flex; gap: 4px; flex-wrap: wrap; }
.spunta-todo { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea-forte); background: var(--carta); cursor: pointer; flex: none; margin-top: 1px; display: inline-block; }
.spunta-todo:hover { border-color: #16a34a; background: #dcfce7; } .spunta-todo.piena { background: #16a34a; border-color: #16a34a; }
.chip-prio { font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 600; vertical-align: 1px; }
.chip-prio.critica { background: #dc2626; color: #fff; } .chip-prio.alta { background: #fef3c7; color: #92400e; }
.chip-prio.normale { background: var(--blu-sf); color: var(--blu); } .chip-prio.bassa { background: var(--hover); color: var(--testo-2); }

/* avvisi da leggere subito */
.dlg-urgente { width: min(480px, calc(100vw - 32px)); padding: 20px; border-top: 6px solid var(--blu); }
.dlg-urgente.prio-alta { border-top-color: #f59e0b; } .dlg-urgente.prio-critica { border-top-color: #dc2626; }
.dlg-urgente::backdrop { background: rgba(24,24,27,.55); }
.testa-urgente { display: flex; gap: 8px; align-items: center; font-size: 17px; margin-bottom: 8px; }

/* assistente IA */
.pannello-ia { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--carta); border-left: 1px solid var(--linea);
  box-shadow: -12px 0 32px rgba(24,24,27,.12); z-index: 80; display: flex; flex-direction: column; }
.pannello-ia[hidden] { display: none; }
.testa-ia { display: flex; align-items: center; gap: 6px; padding: 14px 14px 8px; }
.testa-ia b { display: flex; gap: 6px; align-items: center; } .testa-ia svg { color: #b4743f; }
.uso-ia { padding: 0 14px 10px; font-size: 12px; border-bottom: 1px solid var(--linea); }
.barra-uso { height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; margin-bottom: 4px; }
.barra-uso span { display: block; height: 100%; background: #16a34a; transition: width .4s; } .barra-uso span.ambra { background: #f59e0b; } .barra-uso span.rosso { background: #dc2626; }
.messaggi-ia { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg-ia { background: var(--hover); border-radius: 12px; padding: 10px 12px; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.msg-ia.mio { background: var(--inchiostro); color: #fff; align-self: flex-end; max-width: 85%; }
.msg-ia.errore { background: var(--rosso-sf); color: var(--rosso); } .msg-ia.attesa { color: var(--testo-3); }
.msg-ia.sistema { background: #fbf6f1; border: 1px solid #efe2d4; }
.suggerimenti-ia { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.suggerimenti-ia button { font: inherit; font-size: 12.5px; border: 1px solid var(--linea); background: var(--carta); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.scrivi-ia { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--linea); }
.scrivi-ia textarea { flex: 1; resize: none; }
.bottone-ia { position: absolute; z-index: 70; width: 26px; height: 26px; border-radius: 8px; border: 1px solid #efe2d4; background: #fbf6f1; color: #b4743f; cursor: pointer; display: grid; place-items: center; padding: 0; }
.bottone-ia svg.ic { width: 15px; height: 15px; }
.menu-ia-testo { position: absolute; z-index: 75; width: 208px; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 12px 32px rgba(24,24,27,.14); padding: 6px; }
.menu-ia-testo button { display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 13.5px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.menu-ia-testo button:hover { background: var(--hover); }
.esito-ia { font-size: 12.5px; color: var(--testo-2); padding: 6px 8px; } .esito-ia button { display: inline; width: auto; padding: 0; text-decoration: underline; }
@media (max-width: 700px) { .pannello-ia { width: 100vw; } }

/* schede interne */
.barra-schede { display: flex; gap: 4px; padding: 6px 32px 0; background: rgba(246,246,247,.88); border-bottom: 1px solid var(--linea); overflow-x: auto; position: sticky; top: 57px; z-index: 34; }
.barra-schede[hidden] { display: none; }
.scheda-btn { display: flex; align-items: center; gap: 8px; max-width: 220px; border: 1px solid var(--linea); border-bottom: 0; background: var(--hover); color: var(--testo-2);
  font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 10px 10px 0 0; cursor: pointer; white-space: nowrap; }
.scheda-btn span { overflow: hidden; text-overflow: ellipsis; } .scheda-btn.attiva { background: var(--carta); color: var(--inchiostro); font-weight: 500; }
.scheda-btn i { font-style: normal; color: var(--testo-3); padding: 0 2px; border-radius: 4px; } .scheda-btn i:hover { background: var(--linea); color: var(--inchiostro); }
.scheda-btn.nuova { padding: 6px 12px; }
.area-schede { position: relative; } .area-schede[hidden] { display: none; }
.area-schede iframe { display: block; width: 100%; height: calc(100vh - 110px); border: 0; background: var(--tela); }
.area-schede iframe[hidden] { display: none; }
@media (max-width: 900px) { .barra-schede { padding: 6px 12px 0; top: 105px; } }
.voci-profilo { position: fixed; left: 12px; bottom: 64px; max-height: calc(100vh - 90px); overflow-y: auto; }

/* fascia di stato in alto nelle schede (al posto della barra colorata a sinistra) */
.fascia-stato { font-size: 12.5px; font-weight: 600; padding: 6px 14px; margin: -12px -14px 4px; }
.pannello > .fascia-stato { margin: -20px -22px 14px; padding: 7px 22px; }
.fascia-stato.verde { background: var(--verde-sf); color: var(--verde); } .fascia-stato.arancio { background: var(--ambra-sf); color: var(--ambra); }
.fascia-stato.grigia { background: var(--attivo); color: var(--testo-2); } .fascia-stato.rossa { background: var(--rosso-sf); color: var(--rosso); }

/* documenti di vendita: colonna destra che resta in vista, pulsanti sempre raggiungibili */
@media (min-width: 1101px) {
  .riepilogo-documento { top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
  .riepilogo-documento .pannello { margin-bottom: 12px; padding: 16px 18px; }
  .riepilogo-documento .azioni-documento { position: sticky; bottom: 0; background: var(--tela); padding: 10px 0 4px; box-shadow: 0 -10px 12px -8px rgba(24,24,27,.12); }
}
.azioni-documento { display: grid; gap: 8px; }
.azioni-documento .btn { justify-content: center; }
.azioni-secondarie { display: flex; justify-content: center; gap: 18px; font-size: 13px; }

/* promemoria rapidi */
.rapidi { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rapidi button { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linea-forte); background: var(--carta); color: var(--testo-2); cursor: pointer; }
.rapidi button:hover { border-color: var(--inchiostro); color: var(--inchiostro); }

/* pannello a destra: chat e attività (una sotto l'altra se aperte entrambe) */
.dock { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--tela); border-left: 1px solid var(--linea);
  box-shadow: -12px 0 32px rgba(24,24,27,.12); z-index: 80; display: flex; flex-direction: column; }
.dock[hidden], .dock-parte[hidden] { display: none; }
.dock-parte { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.dock-parte + .dock-parte { border-top: 2px solid var(--linea-forte); }
.dock .testa-ia { background: var(--carta); border-bottom: 1px solid var(--linea); padding: 10px 12px; }
.dock iframe { flex: 1; width: 100%; border: 0; background: var(--tela); }
@media (min-width: 1300px) { body.dock-aperto .principale { margin-right: 440px; } }
body.in-pannello .contenuto { padding: 12px; }
body.in-pannello .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 24px); min-height: 0; }
body.in-pannello .intestazione .sotto { display: none; }
body.in-pannello .intestazione h1 { font-size: 18px; }
body.in-pannello .chat.con-attiva .chat-elenco { display: none; } body.in-pannello .chat:not(.con-attiva) .chat-finestra { display: none; }
body.in-pannello .solo-telefono { display: inline-flex; }

/* allineamenti */
.scelta input[type=radio], .scelta input[type=checkbox] { margin: 2px 0 0; flex: none; }
.scelta > span { line-height: 1.35; }
.dlg-magazzino form[data-multi] { display: grid; gap: 12px; }
.lista-dlg > .vuoto, .lista-dlg .vuoto { margin: 0; padding: 14px 12px; text-align: left; }
.dlg-magazzino .corpo > input[type=search] { padding-left: 12px; }

/* fatture: schede per stato e filtri compatti */
.segmenti-scorre { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; }
.segmenti-scorre label { white-space: nowrap; }
.segmenti label.rosso .conta { background: var(--rosso-sf); color: var(--rosso); }
.segmenti label.ambra .conta { background: var(--ambra-sf); color: var(--ambra); }
.riga-filtri { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; }
.riga-filtri .casella { flex: 1 1 260px; min-width: 0; }
.riga-filtri select { width: auto; flex: 0 0 auto; }
.periodo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--testo-2); flex: 0 0 auto; }
.periodo input[type=date] { width: 150px; }

.segmenti.mini a { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; color: var(--testo-2); text-decoration: none; }
.segmenti.mini a.attivo { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 2px rgba(24,24,27,.08); }
.conta-titolo { font-size: 12px; background: var(--hover); color: var(--testo-2); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; font-weight: 500; }

/* proposte d'ordine: pulsanti allineati in fondo a ogni riquadro */
.proposta { display: flex; flex-direction: column; }
.proposta > .azioni { margin-top: auto; padding-top: 4px; }
.esito-ok { display: flex; gap: 8px; align-items: flex-start; background: var(--verde-sf); color: var(--verde); border: 1px solid #bbe5c8; border-radius: 10px; padding: 10px 12px; margin: 12px 18px 0; }
.esito-ok svg.ic { flex: none; margin-top: 1px; }
.esito-ok[hidden] { display: none; }
/* nelle finestre la tendina dei risultati sta nel flusso (non viene tagliata dal riquadro che scorre) */
dialog .corpo .tendina { position: static; width: 100%; margin-top: 6px; max-height: 300px; overflow-y: auto; box-shadow: none; }
@media (max-width: 600px) { .btn.grande { white-space: normal; text-align: center; justify-content: center; max-width: 100%; } }
/* consegne prenotate e merce pronta in anticipo */
.badge-prenotata, .badge-anticipo { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; margin: 3px 4px 0 0; white-space: nowrap; text-decoration: none; }
.badge-prenotata { background: var(--blu-sf); color: var(--blu); }
.badge-anticipo { background: #f3e8ff; color: #6b21a8; }
.scelte-anticipo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.box-anticipo { background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 13.5px; }
.prenotazioni-ordine { margin: 4px 0 8px; }
/* oggi in magazzino: prenotati / da prenotare, lista di approntamento */
.giorno-lista { font-size: 12px; font-weight: 600; color: var(--testo-2); text-transform: capitalize; margin: 10px 0 2px; }
.voce-oggi.con-spunta { align-items: center; }
.voce-oggi.con-spunta > input[type=checkbox] { flex: none; margin: 0 4px 0 0; }
.voce-oggi.con-spunta > div:nth-child(2) { flex: 1; min-width: 0; }
.azioni-voce { display: flex; gap: 6px; align-items: center; flex: none; }
.barra-approntamento { position: sticky; top: 64px; z-index: 20; display: flex; gap: 10px; align-items: center; background: var(--carta); border: 1px solid var(--linea-forte); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; box-shadow: var(--ombra); }
.barra-approntamento[hidden] { display: none; }
.barra-approntamento span { flex: 1; font-weight: 500; }
.voce-feedback { padding: 12px 0; border-bottom: 1px solid var(--linea); } .voce-feedback:last-child { border-bottom: 0; }
.testa-feedback { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 700px) { .voce-feedback form.campi { grid-template-columns: minmax(0, 1fr) !important; } }

/* testi e collegamenti in nero/grigio: il colore resta solo agli avvisi (verde, arancione, rosso) */
a.link, .contenuto p a, td a, .link-azione, .riga-iva .link, .riga .meta .apri-scheda { color: var(--inchiostro); }
a.link, .contenuto p a, .link-azione { text-decoration: underline; text-decoration-color: var(--linea-forte); text-underline-offset: 3px; }
a.link:hover, .contenuto p a:hover, td a:hover, .link-azione:hover { color: var(--inchiostro); text-decoration-color: var(--inchiostro); }
td a { text-decoration: none; }
.riga .gia, .evento .testo .menzione, .chip-modifica { color: var(--inchiostro); }
.chip-modifica { background: var(--attivo); }

/* domanda «anticipa?» dentro il badge, su una riga */
.domanda-anticipo { display: inline-flex; align-items: center; gap: 4px; padding-right: 3px; margin: 3px 4px 0 0; }
.domanda-anticipo button { font: inherit; font-size: 11.5px; font-weight: 600; border: 1px solid #d8b4fe; background: #fff; color: #581c87; border-radius: 999px; padding: 0 9px; line-height: 18px; cursor: pointer; }
.domanda-anticipo button:hover { background: #ede9fe; }

/* fasi della merce pronta */
.badge-approntato, .badge-da-approntare, .badge-da-saldare { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; margin: 3px 4px 0 0; white-space: nowrap; }
.badge-approntato { background: var(--verde-sf); color: var(--verde); border: 1px solid #bbe5c8; }
.badge-da-approntare { background: var(--ambra-sf); color: var(--ambra); }
.badge-da-saldare { background: var(--rosso-sf); color: var(--rosso); }
.testo-verde { color: var(--verde); font-weight: 600; }

/* prenotazioni collegate agli ordini */
.badge-prenotabile, .badge-non-prenotabile { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.badge-prenotabile { background: var(--verde-sf); color: var(--verde); }
.badge-non-prenotabile { background: var(--attivo); color: var(--testo-2); cursor: help; }
.avviso-non-prenotabile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--hover); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.elenco-prenotabili { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow: auto; margin-top: 4px; }
.opz-ordine { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; font: inherit; font-size: 13.5px; border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro); border-radius: 10px; padding: 7px 10px; cursor: pointer; }
.opz-ordine small { display: block; color: var(--testo-3); font-size: 12px; }
.opz-ordine:hover { border-color: var(--linea-forte); }
.opz-ordine.scelto { border-color: var(--inchiostro); box-shadow: 0 0 0 1px var(--inchiostro); }
.opz-ordine.no { color: var(--testo-3); cursor: not-allowed; background: var(--tela); }
.riga-pren { margin-bottom: 4px; }

/* ritiri in fabbrica */
.griglia-ritiri { align-items: start; }
.legenda-semaforo { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--testo-2); margin: -4px 0 10px; }
.legenda-semaforo > span { display: inline-flex; gap: 6px; align-items: center; }
.proposta-giro { border: 1px solid var(--linea); border-left-width: 4px; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.proposta-giro.semaforo-verde { border-left-color: #22c55e; } .proposta-giro.semaforo-arancio { border-left-color: #f59e0b; } .proposta-giro.semaforo-rosso { border-left-color: #ef4444; }
.testa-proposta { display: flex; gap: 10px; align-items: flex-start; } .testa-proposta .pallino { margin-top: 6px; }
.proposta-giro .perche { font-size: 13px; color: var(--testo-2); margin: 6px 0 10px; }
.voce-ritiro { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--linea); }
.voce-ritiro:first-of-type { border-top: 0; }
.voce-ritiro .stato { margin-left: 4px; }
.prodotti-ritiro { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--testo-2); }
.conta-titolo { font-size: 12px; font-weight: 600; background: var(--attivo); border-radius: 999px; padding: 1px 8px; vertical-align: middle; color: var(--testo-2); }
details.pannello summary { cursor: pointer; }
.barra-approntato { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--linea); font-size: 13px; }
.barra-approntato > span[class^="badge"] { margin: 0; }
.riga-badge { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.badge-dal { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--verde-sf); color: var(--verde); white-space: nowrap; }
/* i badge vanno a capo invece di uscire dalla colonna */
.badge-anticipo, .badge-prenotata, .domanda-anticipo { white-space: normal; max-width: 100%; }
.domanda-anticipo { flex-wrap: wrap; }
.badge-piu-avanti { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; margin: 3px 4px 0 0; white-space: nowrap; background: var(--attivo); color: var(--testo-2); }
.campo-errore { border-color: var(--rosso) !important; box-shadow: 0 0 0 3px var(--rosso-sf) !important; }
.box-forzatura { margin-top: 12px; border: 1px dashed var(--linea-forte); border-radius: 10px; padding: 10px 12px; }
.box-forzatura.attiva { border-color: var(--ambra); background: var(--ambra-sf); }
.impegni-magazzino td { padding: 5px 8px 5px 0; font-size: 13px; vertical-align: top; }
.slot-presto .slot { border-style: dashed; border-color: var(--ambra); }
.chip-non-prenotato { display: inline-block; font-size: 11px; font-weight: 600; background: var(--attivo); color: var(--testo-2); border-radius: 6px; padding: 0 6px; }
a.badge-da-saldare { text-decoration: none; } a.badge-da-saldare:hover { filter: brightness(.96); }
/* assistente IA dentro la barra laterale destra, sopra chat e attività */
.dock .pannello-ia { position: static; width: auto; box-shadow: none; border: 0; z-index: auto; background: var(--carta); }
.dock .pannello-ia .testa-ia { padding: 10px 12px; }
.ic-ia { color: #b4743f; }
/* come salda il cliente: tre strade */
.strade-saldo { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; margin: 4px 0 12px; background: var(--tela); }
.strade-titolo { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
.avviso-acconto { background: var(--rosso-sf); color: var(--rosso); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 0 0 8px; }
.strade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.strada { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 10px; font-size: 13px; }
.strada > span { color: var(--testo-2); flex: 1; }
.strada.scelta { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.strada .btn { margin-top: 4px; }
.icona-strada { width: 30px; height: 30px; border-radius: 8px; background: var(--attivo); display: grid; place-items: center; }
.badge-salda-ritiro { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; margin: 3px 4px 0 0; white-space: nowrap; background: var(--ambra-sf); color: var(--ambra); }
.link-azione.armato { background: var(--rosso); color: #fff; border-radius: 6px; padding: 2px 8px; }
.box-saldo-ritiro { margin-top: 8px; background: var(--ambra-sf); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.contatori-oggi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.contatore-oggi { display: flex; align-items: baseline; gap: 6px; background: var(--carta); border: 1px solid var(--linea); border-radius: 999px; padding: 5px 14px; color: var(--inchiostro); text-decoration: none; font-size: 13.5px; }
.contatore-oggi b { font-size: 17px; }
.contatore-oggi:hover { border-color: var(--linea-forte); }
/* barra del saldo in cima all'ordine */
.barra-saldo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; background: var(--ambra-sf); border: 1px solid #f3d9a6; border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; }
.barra-saldo-testo { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; }
.barra-saldo .avviso-acconto { margin: 0; padding: 2px 8px; font-size: 12.5px; }
.barra-saldo-azioni { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.strada-mini { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.strada-mini.scelta .btn { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.spunta.mini { font-size: 12.5px; gap: 4px; }
.spunta.mini input { width: 14px; height: 14px; }
.badge-da-avvisare { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; margin: 3px 4px 0 0; white-space: nowrap; background: var(--ambra-sf); color: var(--ambra); }
.badge-piu-avanti { cursor: help; }
.info-i { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; font-size: 9px; font-weight: 700; font-style: normal; margin-left: 2px; vertical-align: 1px; }
/* assistente IA: pannello più curato */
.logo-ia { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #feae00, #e0752f); color: #fff; flex: none; box-shadow: 0 4px 12px rgba(224,117,47,.25); }
.logo-ia .ic { width: 17px; height: 17px; color: #fff; }
.logo-ia.grande { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 6px; } .logo-ia.grande .ic { width: 24px; height: 24px; }
.testa-ia-grande { gap: 10px !important; background: linear-gradient(180deg, #fff8ec, var(--carta)); }
.testa-ia-grande b { display: block; } .testa-ia-grande .tenue { font-size: 11.5px; display: block; }
.dock .pannello-ia .uso-ia { padding: 0; border: 0; } .dock .pannello-ia .barra-uso { height: 3px; border-radius: 0; margin: 0; }
.messaggi-ia { background: var(--tela); gap: 12px; }
.msg-ia { background: var(--carta); border: 1px solid var(--linea); border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 2px rgba(24,24,27,.04); }
.msg-ia.mio { background: var(--inchiostro); border-color: var(--inchiostro); border-radius: 14px 14px 4px 14px; }
.msg-ia.attesa { display: inline-flex; gap: 4px; align-items: center; width: auto; align-self: flex-start; color: transparent; font-size: 0; padding: 14px 16px; }
.msg-ia.attesa::before, .msg-ia.attesa::after, .msg-ia.attesa span { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0a050; animation: punto-ia 1s infinite ease-in-out; }
.msg-ia.attesa::after { animation-delay: .3s; }
@keyframes punto-ia { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.benvenuto-ia { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 18px 8px !important; white-space: normal; }
.benvenuto-ia b { font-size: 17px; } .benvenuto-ia > span:not(.logo-ia) { color: var(--testo-2); font-size: 13.5px; }
.benvenuto-ia .suggerimenti-ia { justify-content: center; margin-top: 10px; }
.suggerimenti-ia button { background: var(--carta); transition: border-color var(--t), transform var(--t); }
.suggerimenti-ia button:hover { border-color: #e0a050; transform: translateY(-1px); }
.scrivi-ia { display: block !important; padding: 10px 12px 8px !important; background: var(--carta); }
.campo-ia { display: flex; align-items: flex-end; gap: 8px; border: 1.5px solid var(--linea-forte); border-radius: 18px; padding: 6px 6px 6px 14px; background: var(--carta); transition: border-color var(--t), box-shadow var(--t); }
.campo-ia:focus-within { border-color: #e0a050; box-shadow: 0 0 0 4px rgba(254,174,0,.15); }
.campo-ia textarea { flex: 1; border: 0 !important; box-shadow: none !important; padding: 7px 0 !important; resize: none; min-height: 22px; max-height: 160px; font-size: 14.5px; line-height: 1.45; background: transparent; outline: none; }
.invia-ia { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--inchiostro); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform var(--t), opacity var(--t); }
.invia-ia .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.invia-ia:hover { transform: scale(1.06); } .invia-ia:disabled { opacity: .35; cursor: default; transform: none; }
.nota-ia { font-size: 11px; color: var(--testo-3); text-align: center; margin-top: 6px; }
.menu-ia-testo { width: 228px; padding: 6px; border-radius: 14px; }
.testa-menu-ia { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--testo-2); padding: 4px 6px 8px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.logo-ia.piccolo { width: 22px; height: 22px; border-radius: 7px; box-shadow: none; } .logo-ia.piccolo .ic { width: 13px; height: 13px; }
.richiesta-ia { display: flex; gap: 4px; padding: 6px 4px 2px; } .richiesta-ia input { height: 30px; font-size: 13px; flex: 1; min-width: 0; }
.bottone-ia { background: linear-gradient(135deg, #feae00, #e0752f); border: 0; color: #fff; box-shadow: 0 2px 8px rgba(224,117,47,.3); z-index: 90; }
.bottone-ia svg.ic { color: #fff; }
.scrive-ia { display: inline-flex; gap: 3px; vertical-align: middle; } .scrive-ia::before, .scrive-ia::after, .scrive-ia span { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #e0a050; animation: punto-ia 1s infinite ease-in-out; } .scrive-ia::after { animation-delay: .3s; }
/* documento: consegna in breve, sconto e spedizione nel corpo */
.pannello-consegna { padding-top: 12px !important; padding-bottom: 12px !important; }
.riassunto-consegna { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.riassunto-titolo { display: flex; align-items: center; justify-content: space-between; font-size: 16px; margin-bottom: 4px; }
.riassunto-titolo .freccia { width: 15px; height: 15px; color: var(--testo-3); }
.riassunto-consegna:hover .freccia { color: var(--inchiostro); }
.riassunto-consegna.aperto .riassunto-righe { display: none; }
.riassunto-righe { display: grid; gap: 2px; font-size: 13.5px; color: var(--testo-2); }
.riassunto-righe b { color: var(--inchiostro); font-weight: 600; }
.dettagli-consegna { margin-top: 10px; }
.pannello-aggiunte { padding-top: 10px !important; padding-bottom: 10px !important; }
.pannello-aggiunte .aggiunte { margin: 0; }
.pannello-aggiunte #aggiunte:not(:empty) { margin-top: 10px; display: grid; gap: 8px; max-width: 520px; }
.bozza-titolo .stato-bozza { margin-left: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; vertical-align: middle; }
.bozza-titolo .stato-bozza:not(:empty)::before { content: "("; } .bozza-titolo .stato-bozza:not(:empty)::after { content: ")"; }
.riga-iva[hidden] { display: none; }
.badge-verifica { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; margin: 4px 4px 0 0; }
.badge-verifica.ok { background: var(--verde-sf); color: var(--verde); } .badge-verifica.medio { background: var(--attivo); color: var(--testo-2); } .badge-verifica.no { background: var(--ambra-sf); color: var(--ambra); }