feat(kanban): badges done/locked + drag locked en mismo column + migrations + UX stickers

- badges: locked → tiempo bloqueado; done → fecha completion + total lead time; otherwise → tiempo en columna
- locked cards: drag permitido dentro de mismo column (cross-column rejected con notification)
- card field: locked_at desde JOIN card_lock_history (open period)
- migrations: refactor a embed.FS, archivos 002-005 extraidos de ensureColumns; ensureColumns queda como backstop
- stickers UX: opacidad 1, debajo del texto, picker estable (useRef), boton entra directo a modo con 😀, popover cierra outside, cards done filter brightness
- format: formatDateTimeShort

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/KanbanCard.tsx

@@ -14,6 +14,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import {
+  IconCheck,
   IconClock,
   IconDotsVertical,
   IconEdit,
@@ -29,7 +30,7 @@ import {
 import { memo, useCallback, useRef, useState } from "react";
 import type { Card, CardColor, User } from "../types";
 import { CARD_COLORS, colorBg, colorBorder, colorSwatch } from "./colors";
-import { formatDuration } from "./format";
+import { formatDateTimeShort, formatDuration } from "./format";
 
 interface Props {
   card: Card;
@@ -79,8 +80,8 @@ function KanbanCardImpl({
   const stickerMode = !!activeSticker;
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: card.id,
-    data: { type: "card", columnId: card.column_id },
-    disabled: card.locked || stickerMode,
+    data: { type: "card", columnId: card.column_id, locked: card.locked },
+    disabled: stickerMode,
   });
 
   const setCardRef = useCallback((el: HTMLElement | null) => {
@@ -98,7 +99,7 @@ function KanbanCardImpl({
   };
 
   const startStickerDrag = (index: number) => (e: React.PointerEvent<HTMLSpanElement>) => {
-    if (stickerMode || isOverlay || !onMoveSticker) return;
+    if (!stickerMode || isOverlay || !onMoveSticker) return;
     if (e.button !== 0) return;
     e.stopPropagation();
     e.preventDefault();
@@ -128,7 +129,7 @@ function KanbanCardImpl({
   };
 
   const onStickerContextMenu = (index: number) => (e: React.MouseEvent) => {
-    if (isOverlay) return;
+    if (!stickerMode || isOverlay) return;
     e.preventDefault();
     e.stopPropagation();
     onRemoveSticker?.(card.id, index);
@@ -141,10 +142,16 @@ function KanbanCardImpl({
     background: colorBg(card.color),
     borderColor: card.locked ? "var(--mantine-color-yellow-6)" : colorBorder(card.color),
     borderWidth: card.locked ? 2 : 1,
+    filter: isDone ? "brightness(0.55) saturate(0.7)" : undefined,
   };
 
   const enteredAt = card.entered_at ? new Date(card.entered_at).getTime() : now;
   const liveMs = Math.max(0, now - enteredAt);
+  const lockedAt = card.locked_at ? new Date(card.locked_at).getTime() : 0;
+  const lockedMs = card.locked && lockedAt ? Math.max(0, now - lockedAt) : 0;
+  const createdAt = card.created_at ? new Date(card.created_at).getTime() : 0;
+  const completedAt = card.completed_at ? new Date(card.completed_at).getTime() : 0;
+  const totalDoneMs = isDone && createdAt && completedAt ? Math.max(0, completedAt - createdAt) : 0;
 
   const onContextMenu = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -281,7 +288,7 @@ function KanbanCardImpl({
   return (
     <Paper
       ref={setCardRef}
-      style={{ ...style, position: "relative", cursor: stickerMode ? "copy" : card.locked ? "default" : "grab", touchAction: "none" }}
+      style={{ ...style, position: "relative", cursor: stickerMode ? "copy" : "grab", touchAction: "none" }}
       withBorder
       p="xs"
       shadow={isOverlay ? "lg" : "xs"}
@@ -293,9 +300,9 @@ function KanbanCardImpl({
         onEdit(card);
       }}
       {...attributes}
-      {...(card.locked || stickerMode ? {} : listeners)}
+      {...(stickerMode ? {} : listeners)}
     >
-      <Stack gap={6}>
+      <Stack gap={6} style={{ position: "relative", zIndex: 1, pointerEvents: stickerMode ? "none" : undefined }}>
         <Group justify="space-between" gap={4} wrap="nowrap" align="flex-start">
           <Group gap={4} wrap="nowrap" style={{ flex: 1, minWidth: 0 }} align="flex-start">
             <IconGripVertical
@@ -374,10 +381,25 @@ function KanbanCardImpl({
             ))}
           </Group>
         )}
-        <Group gap={4}>
-          <Badge size="xs" variant="light" color="gray" leftSection={<IconClock size={10} />}>
-            {formatDuration(liveMs)}
-          </Badge>
+        <Group gap={4} wrap="wrap">
+          {card.locked ? (
+            <Badge size="xs" variant="light" color="yellow" leftSection={<IconLock size={10} />}>
+              {formatDuration(lockedMs)}
+            </Badge>
+          ) : isDone && card.completed_at ? (
+            <>
+              <Badge size="xs" variant="light" color="teal" leftSection={<IconCheck size={10} />}>
+                {formatDateTimeShort(card.completed_at)}
+              </Badge>
+              <Badge size="xs" variant="light" color="gray" leftSection={<IconClock size={10} />}>
+                Total: {formatDuration(totalDoneMs)}
+              </Badge>
+            </>
+          ) : (
+            <Badge size="xs" variant="light" color="gray" leftSection={<IconClock size={10} />}>
+              {formatDuration(liveMs)}
+            </Badge>
+          )}
         </Group>
       </Stack>
       {card.stickers && card.stickers.length > 0 && (
@@ -389,6 +411,7 @@ function KanbanCardImpl({
             pointerEvents: "none",
             overflow: "hidden",
             borderRadius: "inherit",
+            zIndex: 0,
           }}
         >
           {card.stickers.map((s, i) => (
@@ -396,7 +419,7 @@ function KanbanCardImpl({
               key={i}
               onPointerDown={startStickerDrag(i)}
               onContextMenu={onStickerContextMenu(i)}
-              title="Arrastra para mover. Click derecho para borrar."
+              title={stickerMode ? "Arrastra para mover. Click derecho para borrar." : ""}
               style={{
                 position: "absolute",
                 left: `${s.x * 100}%`,
@@ -404,10 +427,10 @@ function KanbanCardImpl({
                 transform: "translate(-50%, -50%)",
                 fontSize: 48,
                 lineHeight: 1,
-                opacity: 0.6,
+                opacity: 1,
                 userSelect: "none",
-                cursor: stickerMode || isOverlay ? "default" : "grab",
-                pointerEvents: stickerMode || isOverlay ? "none" : "auto",
+                cursor: stickerMode && !isOverlay ? "grab" : "default",
+                pointerEvents: stickerMode && !isOverlay ? "auto" : "none",
                 touchAction: "none",
               }}
             >