/* ==========================================================================
   Film di Personale e presenze (/funzioni/personale): stile delle sue schermate.
   Markup in _src/films/personale.mjs, copione in assets/mm/films/personale.js.
   Il comune (player, finestra, sidebar, attori, pezzi riusabili) è in
   assets/mm/film.css, caricato prima. Classi con il prefisso fxpe-, tutto sotto .film.
   Si animano solo transform e opacity; le evidenze sono anelli su ::after.
   Sul telefono (.is-narrow) le colonne si stringono a 364 px: il foglio presenze
   mostra solo gli ultimi tre giorni e il totale del mese.
   Nel foglio: FE ferie, MA malattia, ore viola = trasferta con notte fuori sede,
   ore tratteggiate in giallo = differenza da controllare (non entrano nel totale).
   ========================================================================== */
.film .fxpe-hp svg{width:12px;height:12px}
.film .fxpe-ok{width:18px;height:18px;border-radius:50%;background:var(--act);color:#fff;display:grid;place-items:center;flex-shrink:0}
.film .fxpe-ok svg{width:11px;height:11px}
.film .fxpe-av{width:30px;height:30px;border-radius:50%;background:#EFF6E7;color:#3B6E00;display:grid;place-items:center;font-size:10.5px;font-weight:800;flex-shrink:0}
/* intestazione delle card: icona o logo, chi e cosa */
.film .fxpe-ch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.film .fxpe-ch .who{min-width:0}
.film .fxpe-ch .who b,.film .fxpe-ch .who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film .fxpe-ic{width:32px;height:32px;border-radius:9px;background:#EEF6E6;color:#3B6E00;display:grid;place-items:center;flex-shrink:0}
.film .fxpe-ic svg{width:16px;height:16px}
.film .fxpe-ic.lg{background:#fff;border:1px solid #EDF0EA}
.film .fxpe-ic.lg img{width:17px;height:17px;object-fit:contain}
/* due stati nello stesso posto: .on mostra il secondo */
.film .fxpe-sw2{display:grid;justify-items:end}
.film .fxpe-sw2>span{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-end;transition:opacity .25s ease,transform .45s var(--fe-out)}
.film .fxpe-sw2>.b{opacity:0;transform:translateY(5px)}
.film .fxpe-sw2.on>.a{opacity:0;transform:translateY(-5px)}
.film .fxpe-sw2.on>.b{opacity:1;transform:none}
/* nel sottotitolo di una card lo stato cambia in riga, allineato a sinistra */
.film .fxpe-ch .fxpe-sw2{display:inline-grid;justify-items:start;vertical-align:top}
.film .fxpe-ch .fxpe-sw2>span{display:block}

/* ---------- 1-4 · foglio presenze ---------- */
.film .fxpe-two{display:grid;grid-template-columns:600px 258px;gap:0 18px;align-items:start}
.film .fxpe-bar{display:flex;align-items:center;gap:12px;height:34px;margin-bottom:10px}
.film .fxpe-stt{display:grid}
.film .fxpe-stt>.pill{grid-area:1/1;justify-self:start;transition:opacity .25s ease,transform .45s var(--fe-out)}
.film .fxpe-stt .pill svg{width:12px;height:12px}
.film .fxpe-stt>.b{opacity:0;transform:scale(.88)}
.film .fxpe-stt.ok>.a{opacity:0;transform:scale(.92)}
.film .fxpe-stt.ok>.b{opacity:1;transform:none}
.film .fxpe-src{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#7E8882;white-space:nowrap}
.film .fxpe-src svg{width:14px;height:14px;color:#3B6E00;flex-shrink:0}
.film .fxpe-xl{margin-left:auto;display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid #E5E9E1;border-radius:9px;background:#fff;font-size:11.5px;font-weight:700;color:#3d4452;white-space:nowrap}
.film .fxpe-xl img{width:14px;height:14px;object-fit:contain}
.film .fxpe-gc{padding:4px 8px 6px}
.film .fxpe-g{position:relative;z-index:0}
.film .fxpe-r{position:relative;display:grid;grid-template-columns:148px repeat(8,46px) 66px;align-items:stretch;height:38px;border-top:1px solid #F1F3EE}
.film .fxpe-r.fxpe-h{height:34px;border-top:0}
.film .fxpe-h>span{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8B948E;align-self:center}
.film .fxpe-h .fxpe-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;letter-spacing:0;text-transform:none}
.film .fxpe-h .fxpe-c b{font-size:11px;color:#3d4452}
.film .fxpe-h .fxpe-c small{font-size:9px;font-weight:600;color:#9AA29C}
.film .fxpe-h .fxpe-t{letter-spacing:.06em}
.film .fxpe-n{display:flex;flex-direction:column;justify-content:center;min-width:0;padding-left:6px;line-height:1.25}
.film .fxpe-n b{font-size:12px;font-weight:700;white-space:nowrap}
.film .fxpe-n small{font-size:10px;font-weight:600;color:#8B948E;white-space:nowrap}
.film .fxpe-c{position:relative;display:grid;place-items:center;font-size:11.5px;color:#2b322e}
.film .fxpe-c.we{background:rgba(18,24,20,.028)}
.film .fxpe-t{align-self:center;text-align:right;padding-right:8px;font-size:12px;font-weight:800}
.film .fxpe-off{width:4px;height:4px;border-radius:50%;background:#D3D8D0}
.film .fxpe-ab{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:19px;padding:0 5px;border-radius:6px;font:700 10px/1 var(--mono);font-style:normal}
.film .fxpe-ab.fe{background:#EAF1FB;color:#2B5BB0}
.film .fxpe-ab.ma{background:#FDF4DC;color:#8A6400}
.film .fxpe-ab.miss{background:#fff;color:#A87400;border:1px dashed #E2B04A}
/* ore con un segno: trasferta con notte fuori sede, differenza da controllare */
.film .fxpe-ab.tr,.film .fxpe-ab.chk{height:21px;padding:0 5px;font:600 11px/1 var(--mono)}
.film .fxpe-ab.tr{background:#EFEBF8;color:#4E3B8C}
.film .fxpe-ab.chk{background:#FFF8E8;color:#8A6400;border:1px dashed #E2B04A}
/* riga evidenziata: fascia verde chiara dietro (opacità) */
.film .fxpe-r.fm-ring::after{inset:2px -4px;border-radius:9px;background:#F1F9E9;box-shadow:inset 0 0 0 1px #CBE6B0;z-index:-1}
.film .fxpe-r.hl::after{opacity:1}
/* la cella che cambia: prima e dopo nello stesso posto, anello verde quando si riempie */
.film .fxpe-sw>span{grid-area:1/1;display:flex;align-items:center;transition:opacity .25s ease,transform .45s var(--fe-out)}
.film .fxpe-sw>.b{opacity:0;transform:scale(.7)}
.film .fxpe-sw.on>.a{opacity:0;transform:scale(.7)}
.film .fxpe-sw.on>.b{opacity:1;transform:none}
.film .fxpe-sw.on>.b{font-weight:700}
.film .fxpe-c.fm-ring::after{inset:4px 2px;border-radius:8px;box-shadow:0 0 0 1.5px #8CC063,0 0 0 4px rgba(234,246,223,.95)}
.film .fxpe-c.hl::after{opacity:1}
.film .fxpe-lgd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:10.5px;font-weight:600;color:#7E8882}
.film .fxpe-lgd span{display:flex;align-items:center;gap:6px}
.film .fxpe-lgd .fxpe-ab:empty{min-width:20px;height:14px;padding:0}
.film .fxpe-lgd .r{margin-left:auto}

/* la colonna a destra: una card alla volta nello stesso posto */
.film .fxpe-slot{display:grid}
.film .fxpe-slot>*{grid-area:1/1;align-self:start}
.film .fxpe-slot>.fm-card.gone{opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .4s var(--fe-out)}
.film .fxpe-cd{padding:14px 14px 14px;isolation:isolate}
.film .fxpe-kv{margin:0}
.film .fxpe-kv>div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:3px 0;border-top:1px solid #F1F3EE}
.film .fxpe-kv>div:first-child{border-top:0}
/* la riga della fonte che conta (la carta del conducente): fascia verde chiara dietro */
.film .fxpe-kv>div[data-k]{position:relative}
.film .fxpe-kv>div[data-k]::after{content:"";position:absolute;inset:2px -6px;border-radius:8px;background:#F1F9E9;box-shadow:inset 0 0 0 1px #CBE6B0;z-index:-1;opacity:0;transition:opacity .4s ease}
.film .fxpe-kv>div.hl::after{opacity:1}
.film .fxpe-kv dt{font-size:11px;font-weight:600;color:#8B948E;white-space:nowrap}
.film .fxpe-kv dd{margin:0;display:flex;flex-direction:column;align-items:flex-end;font-size:12px;font-weight:700;line-height:1.3;text-align:right;white-space:nowrap}
.film .fxpe-kv dd small{font-size:10px;font-weight:600;color:#8B948E}
.film .fxpe-in{display:inline-flex;align-items:center;gap:6px}

/* 1 · tachigrafo: la fine della giornata sulla carta del conducente, con la fine scritta su WhatsApp */
.film .fxpe-ch .fxpe-sw2>.a{color:#A87400}
.film .fxpe-ch .fxpe-sw2>.b{color:#2F6B12}
.film .fxpe-tl{margin:10px 0 6px}
.film .fxpe-tlh{display:block;margin-bottom:7px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8B948E}
/* sopra la striscia c'è posto per le due etichette degli orari */
.film .fxpe-tl>.fxpe-tlh{margin-bottom:26px}
.film .fxpe-trk{position:relative;height:22px;border-radius:6px;background:#EEF1EA}
.film .fxpe-sg{position:absolute;top:0;bottom:0;border-radius:2px;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--fe-out) calc(var(--i) * 85ms)}
.film .fxpe-sg.g{background:var(--act)}
.film .fxpe-sg.a{top:4px;bottom:4px;background:#E8A500}
.film .fxpe-sg.p{top:7px;bottom:7px;background:#A9C3E3}
.film .fxpe-tl.in .fxpe-sg{transform:none}
.film .fxpe-pin{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:1px;background:#121712;opacity:0;transform:scaleY(.4);transition:opacity .2s ease,transform .45s var(--fe-out)}
.film .fxpe-pin b{position:absolute;bottom:100%;left:50%;margin-bottom:3px;transform:translateX(-50%);padding:2px 5px;border-radius:5px;background:#121712;color:#fff;font-size:9.5px;font-weight:700}
.film .fxpe-pin.in{opacity:1;transform:none}
/* la fine dichiarata: linea tratteggiata, etichetta chiara con il logo di WhatsApp */
.film .fxpe-pin.dec{background:repeating-linear-gradient(#5b655f 0 3px,transparent 3px 5px)}
.film .fxpe-pin.dec b{display:flex;align-items:center;gap:3px;background:#fff;color:#121712;box-shadow:inset 0 0 0 1px #D5DCD2}
.film .fxpe-pin.dec b img{width:10px;height:10px}
/* la differenza tra le due: una graffa sotto la striscia */
.film .fxpe-gap{position:relative;height:8px;margin:3px 0 12px;border:1.5px solid #E2B04A;border-top:0;border-radius:0 0 4px 4px;opacity:0;transform:scaleX(.5);transition:opacity .25s ease,transform .45s var(--fe-out)}
.film .fxpe-gap.in{opacity:1;transform:none}
.film .fxpe-gap span{position:absolute;left:50%;top:100%;transform:translate(-50%,-45%);padding:0 4px;background:#fff;font-size:9.5px;font-weight:700;color:#A87400;white-space:nowrap}
.film .fxpe-acts{display:grid;gap:3px;font-size:11px;font-weight:600;color:#5b655f}
.film .fxpe-acts .fxpe-tlh{margin:0 0 2px}
.film .fxpe-acts .sum{margin-top:2px;padding-top:5px;border-top:1px solid #F1F3EE;color:#121712;font-weight:700}
.film .fxpe-acts .sum b{color:#2F6B12}
.film .fxpe-acts span{display:flex;align-items:center;gap:7px}
.film .fxpe-acts i{width:9px;height:9px;border-radius:2px}
.film .fxpe-acts i.g{background:var(--act)}
.film .fxpe-acts i.a{background:#E8A500}
.film .fxpe-acts i.p{background:#A9C3E3}
.film .fxpe-acts b{margin-left:auto;font-weight:700;color:#121712}
.film .fxpe-cd .fm-btn{height:38px;font-size:12.5px}
/* decide l'ufficio: tenere la fine scritta o approvare quella della carta */
.film .fxpe-bt{display:flex;gap:8px;margin-top:12px}
.film .fxpe-bt .fm-btn{flex:1;margin-top:0}
.film .fxpe-alt{display:flex;align-items:center;justify-content:center;height:38px;padding:0 12px;border:1px solid #E5E9E1;border-radius:10px;background:#fff;font-size:12px;font-weight:700;color:#3d4452;white-space:nowrap;transition:opacity .3s ease}
.film .fxpe-bt.done .fxpe-alt{opacity:.35}

/* 3 · malattia: il messaggio di Sara */
.film .fxpe-bub{margin:0 0 8px;padding:9px 11px;border-radius:4px 12px 12px 12px;background:#F3EFE8;font-size:12px;line-height:1.45;color:#111B21}
.film .fxpe-bub b{font-weight:700}
.film .fxpe-done{display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:9px 10px;border-radius:10px;background:#F4FAEE;border:1px solid #DDEFC9;font-size:11.5px;line-height:1.4;color:#2f3632}
.film .fxpe-done b{font-weight:700}

/* 4 · al consulente */
.film .fxpe-msg{margin:6px 0 10px;padding-top:9px;border-top:1px solid #F1F3EE;font-size:11.5px;line-height:1.5;color:#3d4452}
.film .fxpe-cd .fm-mc-att{max-width:none}

/* ---------- 5 · buste paga ---------- */
.film .fxpe-pg{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
.film .fxpe-dv{height:474px}
.film .fxpe-dv .fm-dv-a4{position:relative;z-index:0;padding:16px 18px 14px}
.film .fxpe-dv .fm-dp-kv{position:relative;z-index:0}
.film .fxpe-dk{position:relative}
.film .fxpe-dk.fm-ring::after,.film .fxpe-df.fm-ring::after{inset:-3px -6px;border-radius:7px;background:#F1F9E9;box-shadow:inset 0 0 0 1px #BFE0A0;z-index:-1}
.film .fxpe-dk.hl::after,.film .fxpe-df.hl::after{opacity:1}
.film .fxpe-dt .fm-tr>span:nth-child(2){color:#6B7480;font-size:10px}
.film .fxpe-dt .fxpe-sum>span{font-weight:800}
.film .fxpe-df{position:relative;display:flex;justify-content:space-between;align-items:center;height:26px;padding:0 8px;font-size:10.5px;color:#4c5550}
.film .fxpe-df:first-of-type{margin-top:8px;border-top:1px solid #DDE1DA}
.film .fxpe-df b{font-size:11px;font-weight:700;color:#121712}
.film .fxpe-ca{padding:16px 18px 16px}
.film .fxpe-ca h6{margin:4px 0 2px}
.film .fxpe-cl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;border-top:1px solid #F1F3EE}
.film .fxpe-cl:first-of-type{border-top:0}
.film .fxpe-cl .tx b{display:block;font-size:12.5px;font-weight:700}
.film .fxpe-cl .tx small{display:block;font-size:10.5px;color:#8B948E}
.film .fxpe-cl>b{font-size:13px;font-weight:800;white-space:nowrap}
.film .fxpe-ct{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px;padding-top:10px;border-top:1.5px solid #E3E8E0}
.film .fxpe-ct>span{font-size:12.5px;font-weight:700}
.film .fxpe-ct b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.film .fxpe-hr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:10px 12px;border-radius:12px;background:#F6FBF0;border:1px solid #DDEFCB}
.film .fxpe-hl{display:flex;align-items:center;gap:8px;min-width:0}
.film .fxpe-hl>svg{width:14px;height:14px;color:#2F6B12;flex-shrink:0}
.film .fxpe-hl b{display:block;font-size:12.5px;font-weight:800}
.film .fxpe-hl small{display:block;font-size:10.5px;color:#5b655f;white-space:nowrap}
.film .fxpe-hv{text-align:right;flex-shrink:0}
.film .fxpe-hv small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5b655f}
.film .fxpe-hv b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#2F6B12}

/* ---------- 6 · il costo sui mezzi: dalle persone ai mezzi ---------- */
.film .fxpe-fl{padding:14px 16px 14px}
.film .fxpe-fh,.film .fxpe-fg{display:grid;grid-template-columns:300px 1fr 300px}
.film .fxpe-fh h6{margin:0 2px 10px}
.film .fxpe-fh h6:last-child{grid-column:3}
.film .fxpe-fg{align-items:start}
.film .fxpe-pp{display:grid;gap:10px}
.film .fxpe-vv{display:grid;gap:8px}
.film .fxpe-p,.film .fxpe-v{position:relative;display:flex;align-items:center;gap:10px;border:1px solid #EEF1EA;border-radius:12px;background:#FCFDFB}
.film .fxpe-p{height:58px;padding:0 12px}
.film .fxpe-v{height:46px;padding:0 12px}
.film .fxpe-v.all{background:#fff;border-style:dashed;border-color:#D5DCD2}
.film .fxpe-p .tx,.film .fxpe-v .tx{flex:1;min-width:0}
.film .fxpe-p .tx b,.film .fxpe-v .tx b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap}
.film .fxpe-p .tx small,.film .fxpe-v .tx small{display:block;font-size:10.5px;color:#8B948E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film .fxpe-p .am,.film .fxpe-v .am{font-size:12.5px;font-weight:800;white-space:nowrap}
.film .fxpe-p::after,.film .fxpe-v::after{box-shadow:0 0 0 1.5px #8CC063,0 0 0 5px #EEF7E4}
.film .fxpe-p.hl::after,.film .fxpe-v.hl::after{opacity:1}
.film .fxpe-ln{position:relative;height:262px;overflow:hidden}
.film .fxpe-ln svg{display:block;width:100%;height:262px}
.film .fxpe-ln path{stroke:#CFE6B8;stroke-linecap:butt}
.film .fxpe-ln path.u{stroke:#BAC4BD;stroke-dasharray:4 4}
.film .fxpe-ln path.mk{stroke:var(--act);opacity:0;transition:opacity .45s ease}
.film .fxpe-ln.on path.mk{opacity:1}
/* le linee si disegnano da sinistra: una copertura bianca scorre via */
.film .fxpe-cov{position:absolute;inset:0;background:#fff;transition:transform 1s var(--fe-io)}
.film .fxpe-ln.in .fxpe-cov{transform:translateX(101%)}
.film .fxpe-note{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:10px 12px;border-radius:11px;background:#F4FAEE;border:1px solid #DDEFCB;font-size:11.5px;font-weight:600;line-height:1.4;color:#2F6B12}
.film .fxpe-note svg{width:14px;height:14px;flex-shrink:0}

/* ---------- 7 · il costo orario nel preventivo ---------- */
.film .fxpe-pv{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.film .fxpe-hc,.film .fxpe-qc{isolation:isolate}
.film .fxpe-hc{padding:14px 14px 8px}
.film .fxpe-hc h6{margin:0}
.film .fxpe-hs{display:flex;align-items:center;gap:6px;margin:3px 0 8px;font-size:11px;color:#7E8882}
.film .fxpe-hs svg{width:12px;height:12px}
.film .fxpe-hrow{position:relative;display:flex;align-items:center;gap:10px;height:52px;padding:0 4px;border-top:1px solid #F1F3EE}
.film .fxpe-hrow .tx{flex:1;min-width:0}
.film .fxpe-hrow .tx b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap}
.film .fxpe-hrow .tx small{display:block;font-size:10.5px;color:#8B948E;white-space:nowrap}
.film .fxpe-hrow>b{font-size:13px;font-weight:800;white-space:nowrap}
.film .fxpe-hrow.fm-ring::after,.film .fxpe-q.fm-ring::after{inset:3px -8px;border-radius:10px;background:#F1F9E9;box-shadow:inset 0 0 0 1px #BFE0A0;z-index:-1}
.film .fxpe-hrow.hl::after,.film .fxpe-q.hl::after{opacity:1}
.film .fxpe-qc{padding:14px 18px 14px}
.film .fxpe-qh{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.film .fxpe-qh h6{margin:0}
.film .fxpe-qh b{font-size:14px;font-weight:800}
.film .fxpe-q{position:relative;display:flex;align-items:center;gap:10px;height:46px;border-top:1px solid #F1F3EE}
.film .fxpe-q .ic{width:28px;height:28px;border-radius:8px;background:#F1F4EE;color:#5b655f;display:grid;place-items:center;flex-shrink:0}
.film .fxpe-q .ic svg{width:14px;height:14px}
.film .fxpe-q .tx{flex:1;min-width:0}
.film .fxpe-q .tx b{display:block;font-size:12.5px;font-weight:700}
.film .fxpe-q .tx small{display:block;font-size:11px;color:#7E8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film .fxpe-q>b{min-width:76px;text-align:right;font-size:12.5px;font-weight:800;white-space:nowrap}
.film .fxpe-qa .fxpe-sw2{justify-items:start}
.film .fxpe-qa .fxpe-sw2>span{display:block}
.film .fxpe-qa>b{opacity:.35;transition:opacity .3s ease}
.film .fxpe-qa.on>b{opacity:1}
.film .fxpe-qi{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;border-top:1px solid #F1F3EE}
.film .fxpe-qi .tx b{display:block;font-size:12.5px;font-weight:700}
.film .fxpe-qi .tx small{display:block;font-size:11px;color:#7E8882}
.film .fxpe-qi>b{font-size:12.5px;font-weight:800;white-space:nowrap}
.film .fxpe-qt{display:flex;align-items:baseline;justify-content:space-between;margin-top:2px;padding-top:10px;border-top:1.5px solid #E3E8E0}
.film .fxpe-qt>span{font-size:12.5px;font-weight:700}
.film .fxpe-qt b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.film .fxpe-qm{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:8px 10px 8px 12px;border-radius:11px;background:#F4FAEE;border:1px solid #DDEFCB;font-size:12px;font-weight:600;color:#2f3632}
.film .fxpe-qm b{font-weight:800;color:#121712}
.film .fxpe-qm .pill svg{width:12px;height:12px}

/* l'etichetta che passa da un pannello all'altro (ore approvate, trasferta, costo orario) */
.film .fxpe-hop{position:absolute;left:0;top:0;z-index:9;padding:5px 9px;border-radius:999px;background:var(--act);color:#fff;font-size:12px;font-weight:800;white-space:nowrap;pointer-events:none;
  box-shadow:0 12px 26px -10px rgba(18,24,20,.5);opacity:0;transition:transform .85s var(--fe-io),opacity .2s ease}
.film .fxpe-hop.in{opacity:1}
.film .fxpe-hop.done{opacity:0;transition:opacity .25s ease}

/* ---------- telefono: colonne da 364 px, il foglio con gli ultimi tre giorni ---------- */
.film .film-player.is-narrow .fxpe-hp,
.film .film-player.is-narrow .fxpe-src,
.film .film-player.is-narrow .fxpe-lgd .r,
.film .film-player.is-narrow .fxpe-x,
.film .film-player.is-narrow .fxpe-qi .tx small{display:none}
/* la colonna delle card si allontana dal foglio: nelle inquadrature delle card non entra un pezzo di griglia */
.film .film-player.is-narrow .fxpe-two{grid-template-columns:364px 258px;column-gap:64px}
.film .film-player.is-narrow .fxpe-gc{padding:4px 6px 6px}
/* le card a destra entrano intere in un'inquadratura del telefono */
.film .film-player.is-narrow .fxpe-cd{padding:12px 12px}
.film .film-player.is-narrow .fxpe-kv>div{min-height:32px}
.film .film-player.is-narrow .fxpe-ch{margin-bottom:8px}
.film .film-player.is-narrow .fxpe-tl{margin:6px 0 4px}
.film .film-player.is-narrow .fxpe-acts{gap:1px}
.film .film-player.is-narrow .fxpe-cd .fm-btn,.film .film-player.is-narrow .fxpe-alt{height:34px}
.film .film-player.is-narrow .fxpe-bt{margin-top:10px}
.film .film-player.is-narrow .fxpe-r{grid-template-columns:110px repeat(3,54px) 78px}
.film .film-player.is-narrow .fxpe-r>.c0,.film .film-player.is-narrow .fxpe-r>.c1,.film .film-player.is-narrow .fxpe-r>.c2,
.film .film-player.is-narrow .fxpe-r>.c3,.film .film-player.is-narrow .fxpe-r>.c4{display:none}
.film .film-player.is-narrow .fxpe-pg,.film .film-player.is-narrow .fxpe-pv{grid-template-columns:364px 364px}
.film .film-player.is-narrow .fxpe-ca{padding:14px 14px}
/* il cedolino più stretto va a capo sul CCNL: la pagina si allunga quanto serve per i ratei */
.film .film-player.is-narrow .fxpe-dv{height:492px}
.film .film-player.is-narrow .fxpe-fl{width:364px;padding:10px 10px}
.film .film-player.is-narrow .fxpe-note{margin-top:10px}
.film .film-player.is-narrow .fxpe-fh,.film .film-player.is-narrow .fxpe-fg{grid-template-columns:142px 1fr 150px}
.film .film-player.is-narrow .fxpe-p .fxpe-av,.film .film-player.is-narrow .fxpe-p .tx small{display:none}
.film .film-player.is-narrow .fxpe-p{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:0 10px}
.film .film-player.is-narrow .fxpe-p .tx{flex:none;width:100%}
.film .film-player.is-narrow .fxpe-v{display:grid;grid-template-columns:1fr auto;align-content:center;column-gap:6px;row-gap:1px;padding:0 9px}
.film .film-player.is-narrow .fxpe-v .tx{display:contents}
.film .film-player.is-narrow .fxpe-v .tx b{grid-column:1 / -1;font-size:12px}
.film .film-player.is-narrow .fxpe-v .tx small{grid-column:1;grid-row:2}
.film .film-player.is-narrow .fxpe-v .am{grid-column:2;grid-row:2;font-size:11.5px}
.film .film-player.is-narrow .fxpe-hc{padding:12px 12px 6px}
.film .film-player.is-narrow .fxpe-qc{padding:12px 12px}
.film .film-player.is-narrow .fxpe-qm{flex-wrap:wrap;row-gap:6px}