/* ==========================================================================
   MiMuovo · pagina Riconciliazione viaggi
   Tabella del confronto (unità per contratto), fonti di un viaggio, bottone
   "Invia mail per le discrepanze" che viene premuto, risposta del committente.
   Stessi colori del kit delle scene (assets/mm/scenes.css).
   ========================================================================== */

/* le copie ferme delle scene stanno dentro .step: il testo della scena non
   deve prendere la misura dei paragrafi del passo (.step p in mm.css) */
.step :where(.scene) p{font-size:inherit;line-height:inherit;color:inherit;max-width:none}

/* le liste a griglia non si allargano oltre la scena per colpa del testo su una riga */
.scene .rows{grid-template-columns:minmax(0,1fr)}

/* testata: l'importo da recuperare è il numero che conta */
.scene .rc-kpis .kpi:nth-child(2){background:#F6FBF1;border-color:#DDEFCB}
.scene .rc-kpis .kpi:nth-child(2) b{color:#2F6B12}

/* ---------- tabella del confronto ---------- */
.rc-tw{container-type:inline-size}
.rc-tbl{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;font-size:12px}
.rc-r{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,.95fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.85fr);align-items:center;gap:10px;
  min-height:46px;padding:6px 10px;border-radius:11px;border:1px solid #EEF1EA;background:#FCFDFB;
  transition:background-color .4s ease var(--d,0ms),border-color .4s ease var(--d,0ms)}
.rc-r > span{position:relative;min-width:0}
.rc-r .r{text-align:right;justify-self:end}
.rc-r.rc-hd{min-height:0;padding:0 10px 2px;border:0;background:none;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8B948E}
.rc-r.bad{background:#FDF6F4;border-color:#F3D6CF}
.rc-tbl.live .rc-r.bad{transition-duration:.45s}
.scene[data-step="1"] .rc-tbl.live .rc-r.bad{background:#FCFDFB;border-color:#EEF1EA}
.scene[data-step="4"] .rc-tbl.live .rc-r.bad{background:#F4FAEE;border-color:#CFE6B4}

.rc-trip{display:flex;align-items:center;gap:9px}
.rc-trip > span{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.rc-trip b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-trip small{font:600 10.5px/1.3 var(--mono);color:#8B948E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-trip .rc-c{display:none}
.rc-unit{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:999px;background:#F1F3EF;color:#2f3632;font-size:11px;font-weight:700;white-space:nowrap}
.rc-unit svg{width:13px;height:13px;color:#3B6E00}
.rc-got{display:grid;justify-items:end}
.rc-got b{font-size:12.5px;font-weight:700;white-space:nowrap}
.rc-got small{display:block;font-size:10px;color:#8B948E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rc-r.bad .rc-got b{color:#A8321F}
.scene[data-step="4"] .rc-tbl.live .rc-r.bad .rc-got b{color:#2F6B12}
.rc-res .pill{font-family:var(--mono)}
/* importi in mono; "in verifica" e "verificato" nel carattere del testo, più stretto */
.rc-res .pill:not(.bad){font-family:var(--font)}

/* valore ancora in verifica */
.rc-wait{display:inline-block;position:relative;overflow:hidden;width:56px;height:10px;border-radius:5px;background:#EEF1EA;vertical-align:middle}
.rc-wait::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-100%);animation:rcShim 1.1s ease-in-out infinite}
@keyframes rcShim{to{transform:translateX(100%)}}

/* tabella stretta: colonna "pagato" dentro la riga del viaggio */
@container (max-width: 560px){
  .rc-r{grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr) minmax(0,.8fr) minmax(0,.95fr);gap:8px;padding:6px 8px}
  .rc-uw{display:none}
  .rc-r .rc-uc{display:none}
  .rc-trip .plate,.rc-trip .rc-d{display:none}
  .rc-trip .rc-c{display:inline}
}
@container (max-width: 380px){
  .rc-trip b{font-size:11.5px}
  .rc-trip small{font-size:9.5px}
  .rc-got small{display:none}
  .rc-wait{width:36px}
  .rc-r{grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr) minmax(0,.8fr) minmax(0,.9fr);gap:6px;min-height:40px}
  .rc-res .pill{padding:4px 6px;font-size:10px}
  .rc-res .pill svg{display:none}
}
/* telefono, scena dei passi: sotto la tratta resta solo l'unità */
@container (max-width: 310px){.rc-trip .rc-cp{display:none}}
/* telefoni da 360: più spazio alla tratta, così "Verona → Modena" resta intera
   e la pillola dell'esito sta nella sua colonna */
@container (max-width: 300px){
  .rc-r{grid-template-columns:minmax(0,1.62fr) minmax(0,.7fr) minmax(0,.74fr) minmax(0,.94fr);gap:5px;padding:6px 7px}
  .rc-trip b{font-size:11px}
  .rc-res .pill{padding:4px 5px}
}

/* ---------- piede della scena: confronto, azione, risposta ---------- */
.rc-foot{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;margin-top:10px}
/* confronto, azione e risposta nella stessa cella: la scena non cambia altezza */
.rc-foot > *{grid-area:1 / 1}
.scene .rc-foot > [data-show]:not(.vis):not(.toast){position:static}
.rc-scan{display:flex;align-items:center;gap:9px;padding:12px 13px;border-radius:12px;background:#F7F9F5;color:#5b655f;font-size:12px;font-weight:600}
.rc-scan svg{width:15px;height:15px;color:#4E9A1B;flex-shrink:0}
.rc-act{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:13px;border:1px solid #F1C4BB;background:#FFFBFA}
.rc-act-t{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.rc-aic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#FCEBE8;color:#A8321F;flex-shrink:0}
.rc-aic svg{grid-area:1/1;width:14px;height:14px;transition:opacity .2s ease}
.rc-aic svg:last-child{opacity:0}
.rc-act-t > span:last-child{display:grid;min-width:0}
.rc-act-t b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-act-t small{display:grid;font-size:11px;color:#7E8882;white-space:nowrap}
.rc-act-t small span{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}
.rc-act-t small .t2{opacity:0}
.rc-act,.rc-aic{transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.rc-act:has(.rc-btn.vis){border-color:#CFE6B4;background:#F7FBF2;transition-delay:.9s}
.rc-act:has(.rc-btn.vis) .rc-aic{background:#EAF6DF;color:#2F6B12;transition-delay:.9s}
.rc-act:has(.rc-btn.vis) .rc-aic svg:first-child{opacity:0;transition-delay:.9s}
.rc-act:has(.rc-btn.vis) .rc-aic svg:last-child{opacity:1;transition-delay:.95s}
.rc-act:has(.rc-btn.vis) small .t1{opacity:0;transition-delay:.9s}
.rc-act:has(.rc-btn.vis) small .t2{opacity:1;transition-delay:.95s}

/* bottone: premuto dal cursore, poi diventa "Mail inviata" */
.scene .rc-btn[data-from]{opacity:1;transform:none}
.rc-btn{position:relative;display:inline-flex;flex-shrink:0}
.rc-btn .face{display:inline-grid;align-items:center;justify-items:center;padding:10px 16px;border-radius:999px;background:#121712;color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(18,23,18,.55);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.rc-btn .face > span{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;transition:opacity .2s ease,filter .2s ease,transform .25s var(--ease-out)}
.rc-btn .face svg{width:14px;height:14px}
.rc-btn .l2{opacity:0;filter:blur(3px);transform:translateY(3px)}
.rc-btn.vis .face{background:#EAF6DF;color:#2F6B12;box-shadow:0 0 0 1px #CFE6B4;transition-delay:.8s;animation:rcPress .3s var(--ease-out) .66s both}
.rc-btn.vis .l1{opacity:0;filter:blur(3px);transition-delay:.8s}
.rc-btn.vis .l2{opacity:1;filter:none;transform:none;transition-delay:.84s}
@keyframes rcPress{0%,100%{transform:scale(1)}45%{transform:scale(.95)}}
.rc-cur{position:absolute;left:58%;top:52%;width:22px;height:22px;opacity:0;pointer-events:none;z-index:2}
.rc-cur svg{width:22px;height:22px;fill:#fff;color:#121712;stroke-width:1.7;filter:drop-shadow(0 3px 4px rgba(18,23,18,.28))}
.rc-btn.vis .rc-cur{animation:rcCur 1.5s var(--ease-out) both}
@keyframes rcCur{
  0%{opacity:0;transform:translate(64px,40px)}
  16%{opacity:1}
  44%{transform:translate(0,0)}
  52%{transform:translate(0,0) scale(.84)}
  62%{transform:translate(0,0) scale(1)}
  82%{opacity:1}
  100%{opacity:0;transform:translate(8px,6px)}
}

/* risposta del committente */
.rc-reply{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;border:1px solid #CFE6B4;background:#F7FBF2}
.rc-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#fff;border:1px solid #DDEFCB;color:#3B6E00;font:800 11px/1 var(--mono);letter-spacing:.02em}
.rc-reply > div{flex:1;min-width:0}
.rc-reply b{display:block;font-size:12px}
.rc-reply p{font-size:12px;color:#2f3632;line-height:1.4}
.rc-reply .pill{flex-shrink:0}

/* ---------- passi: tariffe, fonti di un viaggio, invio ---------- */
.rc-tfs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:6px}
.rc-tf{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;border:1px solid #EEF1EA;background:#FCFDFB;min-width:0}
.rc-tf > svg{width:26px;height:26px;padding:6px;border-radius:8px;background:#EEF6E6;color:#3B6E00;flex-shrink:0}
.rc-tf > span{display:grid;flex:1;min-width:0}
.rc-tf b{font-size:12px}
.rc-tf small{font-size:10.5px;color:#7E8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-tf em{font-style:normal;font-size:11.5px;font-weight:700;white-space:nowrap}
/* contratto: la tariffa cambiata con il listino nuovo */
.rc-tf.new{border-color:#CFE6B4;background:#F4FAEE}
.rc-tf.new em{color:#2F6B12}

.rc-srcs{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.rc-src{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:10px;border:1px solid #EEF1EA;background:#FCFDFB}
.rc-src > svg{width:28px;height:28px;padding:7px;border-radius:8px;background:#EEF6E6;color:#3B6E00;flex-shrink:0}
.rc-src > span{display:grid;flex:1;min-width:0}
.rc-src b{font-size:12.5px}
.rc-src small{font-size:10.5px;color:#7E8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-src em{font-style:normal;font-size:17px;font-weight:800;color:#2F6B12;min-width:22px;text-align:right}
.rc-src.bad{border-color:#F3D6CF;background:#FDF6F4}
.rc-src.bad > svg{background:#FCEBE8;color:#A8321F}
.rc-src.bad em{color:#A8321F}
.rc-verdict{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 12px;border-radius:11px;background:#F4FAEE;border:1px solid #DDEFCB;font-size:12px;color:#20261f}
.rc-verdict svg{width:16px;height:16px;color:#3B6E00;flex-shrink:0}

.rc-sendrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:10px}
.rc-sendrow small{font-size:11px;color:#7E8882}
.rc-later{margin-top:8px}
.rc-later .row{margin:0}

/* ---------- bento: un'unità per contratto ---------- */
.rc-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.rc-units span{display:grid;gap:4px;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--border)}
.rc-units svg{width:18px;height:18px;color:var(--green-deep)}
.rc-units b{font-size:13.5px}
.rc-units em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-soft)}
.rc-units .bad em{color:#A8321F}
.rc-units .ok em{color:var(--green-deep)}

.rc-miss{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px dashed #E8B9AE}
.rc-miss .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:#FCEBE8;color:#A8321F}
.rc-miss .ic svg{width:15px;height:15px}
.rc-miss > span:nth-child(2){flex:1;min-width:0;display:grid}
.rc-miss b{font-size:13px}
.rc-miss small{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-miss em{font-style:normal;font-size:12.5px;font-weight:800;color:#A8321F;white-space:nowrap}
.rc-four{display:flex;gap:8px}
.rc-four > *{width:42px;height:42px;padding:11px;border-radius:12px;background:var(--paper-soft);border:1px solid var(--border);color:var(--green-deep);object-fit:contain}

/* schermi da 980 a 1199 px: la scena dei passi è stretta (sidebar compresa),
   i filtri e gli allegati secondari spariscono come sul telefono */
@media (min-width: 980px) and (max-width: 1199.98px){.steps-vis .scene .hide-xs{display:none}}
/* telefono: l'etichetta "Oggetto" della mail prende meno spazio, l'oggetto resta intero */
@media (max-width: 400px){.scene .mail .mh{grid-template-columns:52px minmax(0,1fr)}}
@media (max-width: 600px){
  .scene .hide-xs{display:none}
  .rc-act{flex-direction:column;align-items:stretch}
  .rc-btn,.rc-btn .face{width:100%}
  .rc-reply{flex-wrap:wrap;row-gap:8px}
  .rc-reply > div{flex-basis:calc(100% - 43px)}
  .rc-reply .pill{margin-left:43px}
}
@media (prefers-reduced-motion: reduce){
  .rc-wait::after{animation:none}
  .rc-btn.vis .face,.rc-btn.vis .rc-cur{animation:none}
  .rc-r{transition:none}
}

/* correzione locale: su telefono la colonna dei passi non si allarga oltre
   lo schermo per colpa del contenuto delle scene (in mm.css .steps usa 1fr) */
@media (max-width: 979px){.steps{grid-template-columns:minmax(0,1fr)}}