/* file/file.css — nuova richiesta e caricamento dei file (SPEC_GestioneCommesse_v2 A.4; struttura dal mockup
   Specifiche/mockup/Mockup_gestione_commessa.html, schermata 1). Solo i token di app.css (:root): nessun colore qui. */

/* ---------- nuova richiesta ---------- */
.ric-flusso{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:var(--s4);color:var(--ink-60);font-size:var(--t1)}
.ric-flusso .f{padding:4px 10px;border-radius:20px;background:var(--line-soft)}
.ric-flusso .f.on{background:var(--margine-soft);color:var(--margine-ink);font-weight:600}
.ric-griglia{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.ric-col{display:grid;gap:var(--s4);align-content:start}
.ric-card{padding:var(--s4)}
.ric-card h2{margin:0 0 var(--s3);font-size:var(--t3)}
.ric-scelte{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s3)}
.ric-scelte button{border:1px solid var(--line);background:var(--card);color:var(--ink-60);border-radius:20px;padding:5px 12px;
  font-size:var(--t2);cursor:pointer}
.ric-scelte button[aria-pressed="true"]{background:var(--margine-soft);border-color:var(--margine-line);color:var(--margine-ink);font-weight:600}
.ric-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3)}
.ric-campi .cell{border-color:var(--line);background:var(--card)}
.ric-dove .it{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0;border-top:1px solid var(--line-soft)}
.ric-dove .it:first-child{border-top:0}
.ric-dove .ic{width:28px;height:28px;border-radius:8px;background:var(--surface);display:grid;place-items:center;flex:none;color:var(--ink-60)}

/* ---------- l'area dei file (anche nella scheda File) ---------- */
.zona-file{border:2px dashed var(--line);border-radius:var(--r);padding:var(--s5) var(--s4);text-align:center;color:var(--ink-60);
  background:var(--surface);cursor:pointer}
.zona-file.sopra{border-color:var(--margine);background:var(--margine-soft);color:var(--margine-ink)}
.zona-file b{display:block;color:var(--ink);margin-bottom:4px}
.zona-file .azioni{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s3)}
.file-lista{display:grid;gap:2px;margin-top:var(--s3)}
.file-riga{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(130px,190px) auto;gap:var(--s3);align-items:center;
  padding:6px 4px;border-top:1px solid var(--line-soft)}
.file-riga:first-child{border-top:0}
.file-tipo{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:700;
  background:var(--sezione-soft);color:var(--sezione)}
.file-tipo.img{background:var(--margine-soft);color:var(--margine-ink)}
.file-tipo.pdf{background:var(--alert-soft);color:var(--alert)}
.file-tipo.d3{background:var(--materiale-soft);color:var(--materiale-ink)}
.file-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.file-meta{font-size:var(--t1);color:var(--ink-60)}
.file-stato{font-size:var(--t1);white-space:nowrap}
.file-stato.ok{color:var(--ok);white-space:normal;word-break:break-word}
.file-chiudi{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s2)}
.file-stato.no{color:var(--alert)}
.file-avanz{height:4px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin-top:3px}
.file-avanz i{display:block;height:100%;background:var(--margine)}

@media (max-width:767px){
  .ric-griglia{grid-template-columns:minmax(0,1fr)}
  .file-riga{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"t n" "t c" "t s"}
  .file-riga .file-tipo{grid-area:t}
  .file-riga>div:nth-child(2){grid-area:n}
  .file-riga select{grid-area:c}
  .file-riga .file-stato{grid-area:s}
}

/* ---------- scheda File: il fascicolo (A.7; struttura da Specifiche/mockup/Fascicolo_commessa_P34_26.html) ---------- */
.fasc-cartelle{padding:var(--s2) var(--s4);margin-bottom:var(--s3)}
.fasc-cartelle .riga-cartelle{margin:0}
.fasc-barra{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.fasc-griglia{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr);gap:var(--s4);align-items:start}
.fasc-albero{padding:var(--s2) 0;max-height:75vh;overflow:auto}
.fasc-livello{border-top:1px solid var(--line-soft);padding:var(--s2) 0}
.fasc-livello:first-child{border-top:0}
.fasc-liv-testa{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:6px var(--s3);cursor:pointer}
.fasc-liv-testa.scelta,.fasc-nodo.scelta{background:var(--margine-soft)}
.fasc-nodo{display:flex;gap:6px;align-items:center;padding:4px var(--s3);cursor:pointer;font-size:var(--t2);white-space:nowrap;overflow:hidden}
.fasc-nodo:hover{background:var(--hover)}
.fasc-nodo .file-tipo{width:26px;height:20px;font-size:9px;border-radius:5px;flex:none}
.fasc-ico{width:12px;color:var(--ink-60);flex:none}
.fasc-data{margin-left:auto;padding-left:var(--s3)}
.fasc-vuota{padding:2px var(--s5)}
.fasc-lato{display:grid;align-content:start}
.fasc-anteprima{padding:var(--s3);display:grid;gap:var(--s3)}
.fasc-anteprima.vuota{min-height:200px;place-items:center}
.fasc-ant-testa{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.fasc-ant-testa .file-nome{flex:1;min-width:0}
.fasc-pdf{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.fasc-img{max-width:100%;max-height:70vh;border-radius:8px;justify-self:center}
.fasc-altro{display:flex;gap:var(--s3);align-items:center;padding:var(--s4)}

/* ---------- scheda Panoramica (A.5) ---------- */
.pan-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);align-items:start}
.pan-card{padding:var(--s4)}
.pan-card h2{margin:0 0 var(--s3);font-size:var(--t3)}
.pan-num{font-size:var(--t5);font-weight:600}
.pan-riga{display:flex;gap:var(--s2);justify-content:space-between;padding:4px 0;border-top:1px solid var(--line-soft);font-size:var(--t2)}
.pan-riga:first-of-type{border-top:0}

/* ---------- intestazione asciutta della commessa (A.5) ---------- */
.testa-passi{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--s2)}
.testa-passi span{font-size:var(--t1);padding:2px 8px;border-radius:20px;background:var(--line-soft);color:var(--ink-60)}
.testa-passi span.fatta{background:var(--margine-soft);color:var(--margine-ink)}
.testa-passi span.ora{background:var(--margine);color:var(--on-color);font-weight:600}
/* SPEC_PercorsoCommessa A.1: la strada a sei passi, il riquadro dell'esito di ogni passo */
.testa-passi span small{margin-left:4px;opacity:.75;font-size:inherit}
.testa-passi span.ferma{background:var(--line);color:var(--ink-60);font-weight:600}
.testa-passi span.fuori{background:var(--alert-soft);color:var(--alert)}
.esito-passo{margin:var(--s3) 0;padding:var(--s3)}
.esito-testa{display:flex;justify-content:space-between;align-items:center;margin:var(--s1) 0}
.esito-riga{display:flex;gap:var(--s2);align-items:baseline;padding:2px 0;flex-wrap:wrap}
.esito-riga.ok>span:first-child{color:var(--margine-ink);font-weight:700}
.esito-riga.no{color:var(--alert)}
.riga-codice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s2);align-items:center;margin-top:var(--s1)}

@media (max-width:767px){
  .fasc-griglia{grid-template-columns:minmax(0,1fr)}
  .fasc-albero{max-height:none}
  .fasc-pdf{height:60vh}
  .tabs.commessa{flex-wrap:nowrap;overflow-x:auto}
  .tabs.commessa button{white-space:nowrap}
}

/* ---------- fase 5: il modello 3D nell'anteprima (file/vista3d.js) ---------- */
.v3d-box{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:var(--s3);min-height:60vh}
.v3d{position:relative;min-height:60vh;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.v3d-tela{position:absolute;inset:0}
.v3d-nota{position:absolute;left:var(--s3);bottom:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.v3d-lato{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.v3d-lato .btn.on{background:var(--margine-soft);border-color:var(--margine-line);color:var(--margine-ink)}
.v3d-sw{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.v3d-stato{padding:var(--s5);text-align:center}
@media (max-width:767px){.v3d-box{grid-template-columns:minmax(0,1fr)}.v3d{min-height:50vh}}
/* SPEC_VisualizzatoreSTEP_DXF: il DXF in 2D (sfondo chiaro, i testi come etichette HTML sopra la tela) */
.dxf-tela canvas{cursor:grab;touch-action:none}
.dxf-testi{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dxf-testo{position:absolute;left:0;top:0;transform-origin:0 0;white-space:pre;line-height:1;color:var(--ink);font-family:inherit}

/* SPEC_PercorsoCommessa A.5: la procedura di produzione, un riquadro per arredo e i passi */
.proc{display:flex;flex-direction:column;gap:var(--s4)}
.proc-testa{padding:var(--s4);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.proc-testa h2,.proc-arredo h2{margin:0 0 var(--s1)}
.proc-arredo{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.proc-passo{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line-soft)}
.proc-num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--line-soft);color:var(--ink-60)}
.proc-passo.fatto .proc-num{background:var(--margine-soft);color:var(--margine-ink)}
.proc-passo.non_serve .proc-num{background:var(--line);color:var(--ink-60)}
.proc-riga{font-size:var(--t-meta);padding:1px 0;color:var(--ink-60);overflow-wrap:anywhere}
.proc-riga.ok{color:var(--ok)}
.proc-riga.no{color:var(--alert)}
.proc-zona{padding:var(--s2) var(--s3);margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}