:root{
  --teal:#0b5f67;--teal-scuro:#073f44;--teal-chiaro:#eef6f6;--teal-chip:#d9eef0;
  --arancio:#c2410c;--arancio-chiaro:#fff7f2;--arancio-bordo:#f0c9b8;
  --kraft:#7a4d1c;--testo:#1c2b2d;--grigio:#4d5f61;--linea:#dde5e6;--linea2:#e7eded;--bordo-campo:#b9c7c8;
  --fondo:#f4f6f6;--ok:#d4ecd9;--ok-testo:#1d5c2b;--ko:#fbe3d8;--ko-testo:#8a2f10;--rosso:#a3260b;
  --avviso:#fff8ea;--avviso-bordo:#f1dfb5;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--testo);font:16px/1.5 "IBM Plex Sans","Segoe UI",system-ui,sans-serif}
a{color:var(--teal)}a:hover{color:var(--teal-scuro)}
h1{margin:0 0 2px;font-size:26px;line-height:1.2}h2{margin:0;font-size:18px}
p{margin:0}
.cod{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500}
.kraft{color:var(--kraft)}
.piccolo{font-size:13px;color:var(--grigio)}
.sotto{color:var(--grigio)}

/* barra in alto */
.barra{background:var(--teal);color:#fff;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.barra .marchio{color:#fff;text-decoration:none;font-size:18px;font-weight:700;letter-spacing:.06em}
.barra .destra{display:flex;align-items:center;gap:12px;font-size:14px;flex-wrap:wrap}
.barra form{margin:0}
.barra .esci{font:inherit;font-size:14px;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:6px;padding:4px 10px;cursor:pointer}
.bollino-prova{background:#e8a33d;color:#2a1a00;font-weight:700;padding:4px 10px;border-radius:4px;font-size:12px}
main{max-width:1240px;margin:0 auto;padding:28px 20px 60px;display:flex;flex-direction:column;gap:22px}

/* fascia della home */
.fascia{background:var(--teal);color:#fff;border-radius:12px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.fascia .testi{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:4px 8px}
.fascia .occhiello{font-size:12px;font-weight:600;letter-spacing:.14em;color:#bfe3e5}
.fascia h1{margin:0;font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:.03em;line-height:1}
.fascia p{font-size:15px;line-height:1.4;color:#e3f3f4;max-width:40ch}
.fascia img{flex:0 0 260px;width:260px;max-width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:50% 38%;border-radius:8px;border:3px solid #fff;display:block}

/* linguette */
.linguette{display:flex;gap:4px;border-bottom:2px solid var(--linea);flex-wrap:wrap}
.linguette a{font-size:15px;font-weight:600;min-height:44px;padding:0 16px;display:flex;align-items:center;text-decoration:none;color:var(--grigio);margin-bottom:-2px;border-bottom:3px solid transparent}
.linguette a.attiva{color:var(--teal);border-bottom-color:var(--teal)}
.linguette a:hover{color:var(--teal)}

/* pulsanti */
.btn,.btn2,.btn-rosso,.btn-rosso2{font:inherit;font-weight:600;font-size:15px;min-height:44px;padding:0 20px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;gap:6px}
.btn{border:1px solid var(--teal);background:var(--teal);color:#fff}
.btn:hover{background:var(--teal-scuro);color:#fff}
.btn2{border:1px solid var(--bordo-campo);background:#fff;color:var(--testo)}
.btn2:hover{border-color:var(--teal);color:var(--testo)}
.btn-rosso{border:1px solid var(--rosso);background:var(--rosso);color:#fff}
.btn-rosso2{border:1px solid var(--rosso);background:#fff;color:var(--rosso);font-size:14px}
.btn.piccolo-btn,.btn2.piccolo-btn{min-height:36px;font-size:13px;padding:0 12px}
.btn.urg{background:var(--arancio);border-color:var(--arancio)}
.btn.urg:hover{background:#9a330a}
button:focus-visible,a:focus-visible,input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:2px}
.azioni{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* chip */
.chip{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.caso-A,.caso-B,.caso-C,.caso-E{background:var(--teal-chip);color:var(--teal)}
.caso-D{background:#e6e2f3;color:#3f2f7a}
.caso-F{background:#e9eef7;color:#24406f}
.caso-da_capire{background:var(--ko);color:var(--ko-testo)}
.chip.ok{background:var(--ok);color:var(--ok-testo)}.chip.ko{background:var(--ko);color:var(--ko-testo)}
.chip.neutro{background:#eef1f1;color:#33474a}

/* riquadri */
.riquadro{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px}
.nota-teal{background:var(--teal-chiaro);border-radius:8px;padding:16px 18px}
.messaggio{background:var(--avviso);border:1px solid var(--avviso-bordo);border-radius:8px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.messaggio form{margin:0}
.errore{background:var(--ko);color:#5a1a08;border-radius:8px;padding:12px 16px}
.testata{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.due-colonne{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;align-items:start}

/* campi */
label{font-size:13px;font-weight:600;color:#3d4f51}
.campo{display:flex;flex-direction:column;gap:6px}
input,select,textarea{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--bordo-campo);border-radius:6px;background:#fff;color:var(--testo);width:100%}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--teal)}
.spunta{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--testo)}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
legend{font-size:13px;font-weight:600;color:#3d4f51;margin-bottom:6px;padding:0}

/* tabelle */
.tabella{background:#fff;border:1px solid var(--linea);border-radius:8px;overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:12px;font-weight:600;color:var(--grigio);padding:8px 10px;border-bottom:2px solid var(--linea);text-transform:uppercase;letter-spacing:.04em}
td{padding:10px;border-bottom:1px solid var(--linea2);vertical-align:top;font-size:14px}
tr:last-child td{border-bottom:0}

/* tabellone */
.filtri{display:flex;gap:6px;flex-wrap:wrap}
.filtri a{font-size:14px;font-weight:600;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--bordo-campo);background:#fff;color:var(--testo);text-decoration:none;display:flex;align-items:center;gap:6px}
.filtri a.attivo{background:var(--teal);border-color:var(--teal);color:#fff}
.filtri .n{font-size:12px;opacity:.75}
table.tabellone{min-width:1120px}
table.tabellone tr.ferma{background:var(--arancio-chiaro)}
table.tabellone td.corrente{background:var(--teal-chiaro)}
tr.ferma td.corrente{background:#fdeee4}
.nome-cliente{font:inherit;font-weight:700;font-size:15px;background:none;border:0;padding:0;color:var(--teal);text-decoration:underline;cursor:pointer;text-align:left;min-height:28px}
.passo{display:flex;align-items:center;gap:6px}
.pal{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;font-size:13px;font-weight:700;flex-shrink:0}
.pal.fatto{background:var(--ok);color:var(--ok-testo)}
.pal.cur{background:var(--teal);color:#fff}
.pal.urg{background:var(--arancio);color:#fff}
.pal.todo{background:#fff;color:#8a9a9c;border:1px solid #c5d0d1}
.pal.na{background:transparent;color:#a3b0b1}
.passo .nota{font-size:13px}
td .btn{margin-top:8px}
.schede{display:flex;flex-direction:column;gap:10px}
.scheda-mob{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}
.scheda-mob.ferma{background:var(--arancio-chiaro);border-color:var(--arancio-bordo)}
.scheda-mob .nome-cliente{font-size:17px;min-height:32px}
.scheda-mob .pallini{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.scheda-mob .btn{width:100%;min-height:46px;border-radius:8px}
.vuoto{background:#fff;border:1px dashed var(--bordo-campo);border-radius:8px;padding:24px;text-align:center;color:var(--grigio)}
@media (max-width:760px){.solo-desk{display:none !important}}
@media (min-width:761px){.solo-mob{display:none !important}}

/* finestra di chiusura */
dialog{border:0;border-radius:10px;padding:22px;width:calc(100% - 32px);max-width:520px;max-height:90vh;overflow-y:auto}
dialog::backdrop{background:rgba(20,32,34,.45)}
dialog form.chiusura{display:flex;flex-direction:column;gap:10px;margin:0}
.scelta{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linea);border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:600;font-size:15px;color:var(--testo)}
.scelta:has(input:checked){border:2px solid var(--teal);background:var(--teal-chiaro);padding:9px 13px}
.zona-elimina{border-top:1px solid var(--linea2);margin-top:12px;padding-top:14px;display:flex;flex-direction:column;gap:10px}
.conferma-elimina{background:var(--ko);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px}
.conferma-elimina b{color:#7a1f08}.conferma-elimina span{font-size:14px;color:#5a1a08}
[hidden]{display:none !important}

/* scheda pratica */
.fasi-scheda{display:flex;flex-direction:column;gap:0}
.fase-riga{display:grid;grid-template-columns:28px minmax(150px,1fr) 150px minmax(160px,1.4fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linea2)}
.fase-riga:last-child{border-bottom:0}
.fase-riga.evidenziata{background:var(--teal-chiaro);margin:0 -18px;padding:10px 18px}
@media (max-width:620px){.fase-riga{grid-template-columns:28px 1fr}.fase-riga select,.fase-riga input{grid-column:2}}
.storia{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.storia time{color:var(--grigio);font-size:13px;margin-right:6px}
.elenco-doc{max-height:320px;overflow-y:auto;border:1px solid var(--linea);border-radius:6px;padding:4px 10px}
.elenco-doc label{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--linea2);font-weight:400;font-size:14px;color:var(--testo)}
.elenco-doc label:last-child{border-bottom:0}
.elenco-doc input{margin-top:4px}
.accesso{max-width:460px;margin:60px auto}

/* posta in arrivo */
.elenco-mail{display:flex;flex-direction:column;gap:10px}
.riga{font:inherit;cursor:pointer;text-align:left;width:100%;background:#fff;border:1px solid var(--linea);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;color:var(--testo);text-decoration:none}
.riga:hover{border-color:var(--teal);color:var(--testo)}
.riga.ferma{background:var(--arancio-chiaro);border-color:var(--arancio-bordo)}
.caso-non_pertinente{background:#eef1f1;color:#33474a}
.testo-mail{white-space:pre-wrap;font-size:14px;max-height:420px;overflow-y:auto;background:#fafbfb;border:1px solid var(--linea2);border-radius:6px;padding:12px;margin:0;font-family:inherit}
.opzione{border:1px solid var(--linea);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:#fff}
.opzione.consigliata{border:2px solid var(--teal);background:var(--teal-chiaro)}
.anteprima-bozza{border:1px dashed var(--bordo-campo);border-radius:8px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px}
.badge-mail{display:inline-block;font-size:12px;font-weight:600;background:var(--arancio);color:#fff;border-radius:999px;padding:2px 8px;margin-top:4px;text-decoration:none}

/* nuovi clienti */
.chip.ai,.stato-proposta_ai{background:#e6e2f3;color:#3f2f7a}
.stato-da_contattare{background:#eef1f1;color:#33474a}
.stato-contattata,.stato-in_attesa{background:var(--teal-chip);color:var(--teal)}
.stato-interessata,.stato-cliente{background:var(--ok);color:var(--ok-testo)}
.stato-da_ricontattare{background:#fdeedd;color:#7a4510}
.stato-non_interessata,.stato-scartata{background:var(--ko);color:var(--ko-testo)}
.urgente{color:var(--arancio);font-weight:600}
tr.ferma{background:var(--arancio-chiaro)}
.proposte summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.carte-proposte{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.carta-proposta{border:1px solid var(--linea);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px}
.perche{background:#f5f3fb;border-left:3px solid #7a6bb8;padding:8px 12px;font-size:14px;border-radius:0 6px 6px 0}
.scarta{display:flex;gap:8px;margin:0}
.scarta input{font-size:14px;padding:7px 10px}
.filtri-clienti{gap:12px}
.btn[disabled],.btn2[disabled]{opacity:.5;cursor:not-allowed}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* passo 3: righe del modulo */
.righe-crea td input,.righe-crea td select{padding:7px 8px;font-size:14px}
.righe-crea td{padding:8px 6px}

/* passo 3: una scheda per riga, campi che vanno a capo (niente scorrimento orizzontale) */
.riga-crea{border:1px solid var(--linea);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fafbfb}
.riga-crea-testa{font-size:15px}
.campi-riga{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px 12px;align-items:start}
.campi-riga .campo{gap:4px;min-width:0}
.campi-riga .largo{grid-column:span 2}
.campi-riga input,.campi-riga select{padding:7px 8px;font-size:14px;min-width:0}
@media (max-width:520px){.campi-riga .largo{grid-column:1/-1}}
.aggiungi-righe summary{cursor:pointer;font-weight:600;color:var(--teal);padding:4px 0}
.aggiungi-righe[open]{display:flex;flex-direction:column;gap:10px}

/* home: come sta PackMate */
.kpi-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){.kpi-griglia{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1180px){.kpi-griglia{grid-template-columns:repeat(6,1fr)}}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--testo)}
a.kpi:hover{border-color:var(--teal);color:var(--testo)}
.kpi-nome{font-size:13px;font-weight:600;color:var(--grigio);text-transform:uppercase;letter-spacing:.05em}
.kpi-valore{font-size:clamp(22px,2.4vw,28px);font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.kpi-nota{font-size:13px;color:var(--grigio)}
.kpi-ok .kpi-valore{color:var(--ok-testo)}.kpi-ko .kpi-valore{color:var(--rosso)}
.rosso{color:var(--rosso) !important;font-weight:600}
.dati-rapidi{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--grigio);background:var(--teal-chiaro);border-radius:8px;padding:10px 16px}
.dati-rapidi b{color:var(--testo)}
.legenda{display:flex;gap:16px;font-size:13px;color:var(--grigio)}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.q-ricavi,.b-ricavi{background:var(--teal);fill:var(--teal)}
.q-costi,.b-costi{background:#d9824e;fill:#d9824e}
.grafico-scorre{overflow-x:auto}
.grafico{width:100%;min-width:620px;height:auto;display:block}
.grafico .griglia-linea{stroke:var(--linea);stroke-width:1}
.grafico .asse{font-size:12px;fill:var(--grigio);font-family:inherit}
.grafico .asse.futuro{fill:#a3b0b1}
.grafico .mese-sfondo{fill:transparent}
.grafico .mese-corrente{fill:var(--teal-chiaro)}
.grafico g:hover .mese-sfondo{fill:#f3f6f6}
.dettaglio summary,.centro summary{cursor:pointer}
.dettaglio summary{font-weight:600;color:var(--teal);font-size:14px}
.dettaglio[open] summary{margin-bottom:10px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.barre{display:flex;flex-direction:column;gap:4px}
.riga-barra,.centro summary{display:grid;grid-template-columns:minmax(120px,210px) 1fr 130px;gap:12px;align-items:center;min-height:34px}
.centro summary{list-style:none;padding:2px 6px;margin:0 -6px;border-radius:6px}
.centro summary::-webkit-details-marker{display:none}
.centro summary:hover{background:#f3f6f6}
.centro[open] summary{background:var(--teal-chiaro)}
.barra-nome{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.centro .barra-nome{font-weight:600;color:var(--teal)}
.centro .barra-nome::before{content:"▸ ";color:var(--grigio)}
.centro[open] .barra-nome::before{content:"▾ "}
.barra-traccia{height:14px;background:#eef2f2;border-radius:4px;overflow:hidden}
.barra-piena{display:block;height:100%;border-radius:4px}
.barra-valore{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.centro-dentro{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;padding:10px 6px 16px;border-bottom:1px solid var(--linea2)}
.centro-dentro h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--grigio);margin:0 0 6px}
.centro-dentro td{padding:6px 8px}
.scorre-poco{max-height:300px;overflow-y:auto}
.centro-dentro.uno{grid-template-columns:1fr}
.centro-dentro.uno table{table-layout:fixed}
.centro-dentro.uno td:first-child{width:110px}
.centro-dentro.uno td:last-child{width:120px}
.centro.escluso .barra-nome,.centro.escluso .barra-valore{color:var(--grigio);font-weight:400}
.separa{margin-top:10px;padding-top:10px;border-top:1px solid var(--linea2)}
@media (max-width:620px){.riga-barra,.centro summary{grid-template-columns:1fr 110px}.barra-traccia{grid-column:1/-1;grid-row:2}}