/* ============================================================
   Tablero: Backlog · To Do · Doing · Done
   El color de cada tarjeta sigue siendo el de su flow, para que al
   moverla por el tablero se siga sabiendo de qué parte del plan es.
   ============================================================ */
.tablero {
  display: grid;
  grid-template-columns: repeat(4, minmax(232px, 1fr));
  gap: 13px;
  align-items: start;
}
@media (max-width: 1040px) {
  .tablero { grid-template-columns: repeat(2, minmax(232px, 1fr)); }
}
@media (max-width: 620px) {
  .tablero { grid-template-columns: 1fr; }
}

.tbcol {
  background: #f1f3f8;
  border-radius: 14px;
  padding: 10px;
  min-height: 150px;
}
.tbcol-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 5px 10px;
  cursor: help;
}
.tbc-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5a6478;
}
.tbc-n {
  margin-left: auto;
  min-width: 21px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 680;
  color: #6b7484;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Cada columna con su acento, para orientarse sin leer el título */
.tbcol[data-col=backlog] .tbc-t { color: #64748b; }
.tbcol[data-col=todo]    .tbc-t { color: #4338ca; }
.tbcol[data-col=doing]   .tbc-t { color: #0369a1; }
.tbcol[data-col=done]    .tbc-t { color: #15803d; }
.tbcol[data-col=todo]  { background: #f1f2fb; }
.tbcol[data-col=doing] { background: #eef6fc; }
.tbcol[data-col=done]  { background: #f0f9f3; }

.tbcol-b {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 76px;
  border-radius: 10px;
  transition: background .12s, box-shadow .12s;
}
.tbcol-b.encima {
  background: rgba(109, 63, 224, .07);
  box-shadow: inset 0 0 0 2px rgba(109, 63, 224, .32);
}
.tb-hueco {
  display: none;
  padding: 13px;
  border: 1px dashed #b9a2ff;
  border-radius: 10px;
  text-align: center;
  font-size: 11.5px;
  color: #6d3fe0;
}
.tbcol-b.encima .tb-hueco { display: block; }

/* ── La tarjeta del tablero ─────────────────────────────────── */
.tbcard {
  position: relative;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 11px;
  padding: 10px 12px 9px 13px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 1px 2px rgba(22, 28, 38, .05);
  transition: box-shadow .13s, transform .13s, border-color .13s;
}
.tbcard::after {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--fc);
  opacity: .85;
}
.tbcard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fc) 34%, #e5e9f0);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--fc) 16%, rgba(22, 28, 38, .09));
}
.tbcard:active { cursor: grabbing; }
.tbcard.llevando { opacity: .42; transform: rotate(-1.2deg); }
.tbcard.riesgo { border-color: #fecaca; }
.tbcard.riesgo::after { background: #dc2626; opacity: 1; }

.tbc-top { display: flex; align-items: center; gap: 6px; }
.tbc-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fc) 10%, #fff);
  color: var(--fc);
  font-size: 10.5px;
  font-weight: 700;
}
.tbc-num i { font-style: normal; font-size: 9.5px; }
.tbc-riesgo {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 9.5px;
  font-weight: 680;
}

.tbcard h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #161c26;
}

.tbc-kpi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #f2f4f8;
}
.tbc-kpi span {
  font-size: 10.5px;
  color: #8b95a7;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tbc-kpi b {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #161c26;
}

.tbc-pasos { display: flex; align-items: center; gap: 7px; }
.tbc-bar { flex: 1; height: 4px; border-radius: 3px; background: #eef1f6; overflow: hidden; }
.tbc-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #34d399, #10b981); }
.tbc-pasos span { font-size: 10px; color: #8b95a7; font-variant-numeric: tabular-nums; }

.tbc-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #8b95a7;
}
.tbc-foot .who-mini { width: 19px; height: 19px; font-size: 9px; }
.tbc-act { margin-left: auto; font-weight: 650; color: #5a6478; font-variant-numeric: tabular-nums; }

/* ── Accesos a las vistas en borrador, en el pie ────────────── */
.foot-vistas {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.foot-vistas > span { font-size: 11px; color: #a8b0be; }
.mtab.foot-item {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  font-size: 11px;
  color: #8b95a7;
  cursor: pointer;
  min-width: 0;
  text-align: left;
}
.mtab.foot-item:hover { background: #fff; border-color: #e3e8ef; color: #5a6478; }
.mtab.foot-item.active { background: #f5f0ff; border-color: #d8ccff; color: #6d3fe0; }