.board {
  flex: 1; min-height: 0;
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 20px;
}
.col {
  flex: none; width: 300px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  transition: border-color .12s, background-color .12s;
}
.col.is-target { border-color: var(--blue-300); background: #0E1828; }
.col-head {
  position: relative;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line-1);
}
.col-head::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--col-cor, var(--line-2)); }
.col-title { display: flex; align-items: baseline; gap: 8px; }
.col-title h2 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-14);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-0);
}
.col-title .n { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-14); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.col-title .info { margin-left: auto; color: var(--fg-2); }
.col-title .info:hover { color: var(--fg-1); }
.col-sub { margin-top: 4px; font-size: var(--fs-12); color: var(--fg-2); min-height: 18px; }
.col-sub .valor { color: var(--blue-100); font-weight: 600; font-variant-numeric: tabular-nums; }
.col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.col-more { margin: 2px 0 6px; align-self: stretch; }
.col-empty { padding: 28px 12px; text-align: center; font-size: var(--fs-12); color: var(--fg-2); border: 1px dashed var(--line-2); }

.card {
  position: relative;
  display: block;
  padding: 11px 12px 11px 16px;
  background: var(--bg-2);
  box-shadow: var(--shadow-1);
  border-radius: var(--r-1);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: background-color .12s, box-shadow .12s;
}
.card:hover { background: #142033; }
.card:focus-visible { box-shadow: var(--focus); }
.card.is-focus, .card:focus-visible { background: var(--bg-3); }
.card.is-selected { background: rgba(30, 94, 255, .12); box-shadow: inset 0 0 0 1px var(--blue-500); }
.card.is-dragging { opacity: .35; }
.card .rg { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-1); }
.card .rg > i { position: absolute; left: 0; right: 0; bottom: 0; }
.card.is-focus .rg, .card:focus-visible .rg { width: 4px; }
.card-top { display: flex; align-items: flex-start; gap: 8px; }
.card-name { flex: 1; min-width: 0; font-weight: 600; color: var(--fg-0); font-size: var(--fs-14); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-prod { margin-top: 3px; font-size: var(--fs-12); color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { margin-top: 8px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-11); color: var(--fg-2); font-weight: 500; }
.card-meta .ico { display: inline-flex; align-items: center; gap: 3px; }
.card-meta .seg { color: var(--blue-100); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.card-next { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-1); display: flex; gap: 6px; align-items: center; font-size: var(--fs-12); color: var(--fg-1); }
.card-next.is-late { color: var(--danger-fg); }
.card .wa {
  position: absolute; right: 8px; bottom: 8px;
  opacity: 0; transition: opacity .12s;
}
.card:hover .wa, .card:focus-within .wa, .card.is-focus .wa { opacity: 1; }

.ghost {
  position: fixed; z-index: 70; pointer-events: none; width: 276px;
  transform: rotate(1.5deg); box-shadow: var(--shadow-2); opacity: .96; cursor: grabbing;
}
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }