{
:class="['tl-event-pill__status', statusIcon(ev)]"
aria-hidden="true"
/>
+
+
{
{{ fmtHora(ev.startH) }} – {{ fmtHora(ev.endH) }}
{{ ev.label }}
+
+
@@ -640,6 +671,46 @@ html:not(.app-dark) .tl-day-badge--feriado {
margin-left: 0;
}
+/* Botao ⏱ "Iniciar cronometro" — overlay no canto sup. direito do
+ pill em sessoes em curso. Cor solida pra destacar contra o bg
+ colorido do evento; pulso sutil pra chamar atencao sem irritar. */
+.tl-event-pill__crono,
+.vt-event__crono {
+ position: absolute;
+ top: 3px;
+ right: 3px;
+ width: 22px;
+ height: 22px;
+ display: grid;
+ place-items: center;
+ background: rgba(0, 0, 0, 0.45);
+ color: #fff;
+ border: 1px solid rgba(255, 255, 255, 0.35);
+ border-radius: 9999px;
+ cursor: pointer;
+ font-family: inherit;
+ padding: 0;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+ transition: background-color 160ms ease, transform 160ms ease, border-color 160ms ease;
+ animation: tl-crono-pulse 2s ease-in-out infinite;
+ z-index: 2;
+}
+.tl-event-pill__crono:hover,
+.vt-event__crono:hover {
+ background: rgba(16, 185, 129, 0.85); /* emerald-500 — convida ao "play" */
+ border-color: rgba(255, 255, 255, 0.6);
+ transform: scale(1.08);
+ animation-play-state: paused;
+}
+.tl-event-pill__crono > i,
+.vt-event__crono > i {
+ font-size: 0.7rem;
+}
+@keyframes tl-crono-pulse {
+ 0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(16, 185, 129, 0.45); }
+ 50% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(16, 185, 129, 0); }
+}
+
/* Realizado: glow verde sutil (cor do bg ja eh verde) — celebra o feito */
.tl-pill--realizado {
box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.28), 0 4px 12px rgba(16, 185, 129, 0.18);