/* La filiera del lavoro (pezzo 8): la striscia sottile delle fasi e i pallini Prev · Cons · Fatt.
   Solo gettoni di app.css (--piano, --linea, --ink*, --marchio, --allerta, --fase-*, --cifre, --t-*): chiaro e scuro
   vengono da li'. Prefisso lf-. Le misure della striscia sono quelle del mockup (giro 3). */

/* la striscia: segni nel colore del tipo (mai cambia con lo stato), pieno = approvata, meta' = da approvare, anello = da fare */
.lf-striscia { position:relative; height:34px; min-width:0; }
.lf-striscia.lf-vuota { height:auto; padding:2px 0 6px; font-size:var(--t-12); color:var(--ink-3); }
.lf-tr { position:absolute; left:0; right:0; top:9px; height:1px; background:var(--linea); }
.lf-tr.lf-dopo { background:none; border-top:1px dashed var(--linea); }
.lf-sg { position:absolute; top:9.5px; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:var(--piano); box-shadow:inset 0 0 0 2px var(--lf-tipo); z-index:1; }
.lf-sg.lf-pieno { background:var(--lf-tipo); box-shadow:none; }
.lf-sg.lf-attesa { background:linear-gradient(90deg,var(--lf-tipo) 50%,var(--piano) 50%); box-shadow:inset 0 0 0 1.5px var(--lf-tipo); }
.lf-sg.lf-cardine { width:5px; height:14px; margin:-7px 0 0 -2.5px; border-radius:2px; }
.lf-sg.lf-soldi { width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:1px; transform:rotate(45deg); }
.lf-sg.lf-prossima { z-index:2; outline:2px solid var(--ink); outline-offset:2px; }
.lf-sg.lf-prossima.lf-rit { outline-color:var(--allerta); }
.lf-oggi { position:absolute; top:0; width:2px; height:19px; margin-left:-1px; background:var(--marchio); z-index:3; }
.lf-taglio { position:absolute; top:3.5px; width:14px; height:12px; margin-left:-7px; background:var(--piano); z-index:2; }
.lf-taglio::before, .lf-taglio::after { content:""; position:absolute; top:0; width:1.5px; height:12px; background:var(--ink-3); transform:skewX(-24deg); }
.lf-taglio::before { left:3px; } .lf-taglio::after { left:8px; }
.lf-tacca { position:absolute; top:5px; width:1px; height:9px; background:var(--linea); }
/* le etichette si misurano (sistema): niente transizioni, neanche quella brevissima di «riduci animazioni», che farebbe
   leggere la posizione di prima */
.lf-et { position:absolute; top:19px; font-size:var(--t-11); line-height:14px; white-space:nowrap; color:var(--ink-2); transform:translateX(-50%); transition:none !important; }
.lf-et.lf-sx { transform:none; } .lf-et.lf-dx { transform:translateX(-100%); }
.lf-et.lf-forte { color:var(--ink); font-weight:600; }
.lf-et.lf-rit { color:var(--allerta); }
.lf-et time { font-family:var(--cifre); font-weight:400; margin-left:5px; color:inherit; }
.lf-et.lf-bordo { color:var(--ink-3); font-family:var(--cifre); }
.lf-et.lf-oggi-t { color:var(--allerta); font-family:var(--cifre); }
.lf-et.lf-taglio-t { color:var(--ink-3); }
.lf-et.lf-mese { top:-15px; }
/* la striscia grande della Panoramica: piu' aria per le etichette di tutte le fasi */
.lf-striscia.lf-grande { height:44px; margin:14px 0 4px; }
.lf-striscia.lf-grande .lf-et { font-size:var(--t-12); }

/* i pallini: pieno = approvato (o pagata), meta' = inviato, anello = in bozza, tratteggio = non c'e';
   in fucsia il documento che il passo dopo chiede */
.lf-pallini { display:flex; justify-content:flex-end; gap:4px; min-width:0; }
.lf-pal { display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:0 4px; border:0; border-radius:6px;
  background:none; color:var(--ink-2); font:inherit; font-size:var(--t-12); cursor:pointer; white-space:nowrap; }
.lf-pal:hover { background:var(--piano-2); color:var(--ink); }
.lf-pal:focus-visible { outline:2px solid var(--marchio); outline-offset:1px; }
.lf-pal i { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; flex:none; }
.lf-pal.lf-pieno { color:var(--ink); } .lf-pal.lf-pieno i { background:currentColor; box-shadow:none; }
.lf-pal.lf-meta i { background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.lf-pal.lf-manca i { box-shadow:none; border:1.5px dashed currentColor; width:10px; height:10px; }
.lf-pal.lf-indietro { color:var(--allerta); }

/* L'elenco Lavorazioni (la frase, le righe, i gruppi) sta in lavorazioni.css (prefisso lv-, Lavorazioni a gruppi,
   owner 3-10); qui restano la striscia e i pallini, che usano anche la Panoramica e la Regia. */