/* ==========================================================================
   MiMuovo · pagina Personale e presenze
   L'invio al consulente sotto la griglia (niente avvisi sopra i numeri),
   la legenda del foglio presenze, la mail inviata nel bento.
   ========================================================================== */
.step :where(.scene) p{font-size:inherit;line-height:inherit;color:inherit;max-width:none}
.scene .rows{grid-template-columns:minmax(0,1fr)}

/* ---------- testata: il foglio si compila da solo ----------
   passo 1: i primi quattro giorni; passo 2: arrivano gli altri, una colonna
   dopo l'altra; passo 3: parte per il consulente. Al ritorno si svuota in fretta. */
.pe-grid .tgrid > .l{transition:opacity .14s ease,transform .14s ease}
.scene:not([data-step="1"]) .pe-grid .tgrid > .l{transition:opacity .35s ease,transform .45s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--c) * 70ms)}
.scene[data-step="1"] .pe-grid .tgrid > .l{opacity:0;transform:scale(.9)}
@media (prefers-reduced-motion: reduce){.pe-grid .tgrid > .l{transition:none!important}}

/* ---------- inviato al consulente ---------- */
.pe-sent{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:#F4FAEE;border:1px solid #DDEFC9;font-size:12px;line-height:1.35;color:#2f3632}
.pe-sent img{flex-shrink:0}
.pe-sent span{min-width:0}
.pe-sent b{display:block;font-size:12.5px;color:#121712}
.pe-sent em{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:11px;font-weight:700;color:#2F6B12;white-space:nowrap}
.pe-sent em svg{width:13px;height:13px}

/* ---------- legenda del foglio presenze ---------- */
.pe-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:11px;color:#7E8882}
.pe-legend b{color:#2B5BB0;font-size:10.5px}
.pe-legend span:nth-child(2) b{color:#8A6400}
.pe-legend .r{margin-left:auto;color:#4c5550}
.pe-legend .r b{color:#2F6B12;font-size:12px}

/* ---------- bento: la mail inviata ---------- */
.pe-mail{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--border);max-width:460px}
.pe-mail img{flex-shrink:0}
.pe-mail span{display:grid;min-width:0}
.pe-mail b{font-size:14px}
.pe-mail small{font-size:12px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-mail em{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:700;color:var(--green-deep);white-space:nowrap}
.pe-mail em svg{width:14px;height:14px}

/* nei passi la scena è più stretta della testata: sette giorni, non dieci */
@media (min-width: 601px){
  .steps .tgrid{grid-template-columns:70px repeat(7,minmax(0,1fr))}
  .steps .tgrid > span:nth-child(11n+9),.steps .tgrid > span:nth-child(11n+10),.steps .tgrid > span:nth-child(11n+11){display:none}
}
@media (max-width: 600px){.pe-sent em{display:none}}

/* su telefono la colonna dei passi non si allarga oltre lo schermo */
@media (max-width: 979px){.steps{grid-template-columns:minmax(0,1fr)}}