/* ---------- Tablero de tareas ---------- */
/* El tablero ocupa hasta el final de la ventana (--board-top lo calcula
   BoardView) y cada columna desplaza sus tarjetas por dentro. */
.board{
  --board-top:240px;
  display:grid;
  grid-template-columns:repeat(var(--cols, 4),minmax(0,1fr));
  gap:12px;
  height:calc(100vh - var(--board-top));
  height:calc(100dvh - var(--board-top));
  min-height:420px;
}
.col{
  --st:var(--st-pend);
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--surface-2) 70%, var(--bg));
  border-radius:var(--r-xl);
  transition:background .15s ease, box-shadow .15s ease;
}
.col.drag-over{
  background:var(--surface-2);
  background:color-mix(in srgb, var(--accent-solid) 5%, var(--surface-2));
  box-shadow:inset 0 0 0 1px var(--accent-solid);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-solid) 35%, transparent);
}
.col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:44px;
  padding:0 8px 0 14px;
}
.col-head .name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--ink);min-width:0;}
.col-head .dot{background:var(--st);}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;}
.col-head .count{
  font-size:12px;
  font-weight:500;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.col-add{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:none;
  border:none;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--ink-faint);
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.col-add:hover{background:var(--hover);color:var(--ink);}

.cards{
  position:relative;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 6px 8px;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.col:hover .cards{scrollbar-color:var(--line-strong) transparent;}
.cards::-webkit-scrollbar{width:8px;}
.cards::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:padding-box;}
.col:hover .cards::-webkit-scrollbar-thumb{background-color:var(--line-strong);}

.card{
  position:relative;
  flex:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:10px 12px 11px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);}
.card:active{cursor:grabbing;}
.card.dragging{
  opacity:.4;
  box-shadow:none;
  border-style:dashed;
  border-color:var(--line-strong);
}
.card .client-chip{margin-bottom:7px;}
.cat{
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card h3{font-size:13.5px;font-weight:500;margin:0;line-height:1.4;letter-spacing:-0.005em;color:var(--ink);}
.card p{
  font-size:12.5px;
  color:var(--ink-faint);
  margin:3px 0 0;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card .meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--ink-faint);
  margin-top:9px;
}
.card .meta .icon{display:inline-flex;color:var(--ink-faint);margin-right:0;}
.card .contact{display:inline-flex;align-items:center;gap:5px;min-width:0;flex:1 1 90px;max-width:100%;}
.card .contact > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card .links{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;}
.card .meta .due-badge{margin-left:auto;}

.empty-col{
  font-size:12.5px;
  color:var(--ink-faint);
  text-align:center;
  line-height:1.5;
  padding:20px 8px;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);
}
.empty-col span{font-size:12px;}
.col.drag-over .empty-col{border-color:var(--accent-solid);color:var(--accent);}

.drop-indicator{
  position:absolute;
  left:8px;
  right:8px;
  height:2px;
  border-radius:2px;
  background:var(--accent-solid);
  pointer-events:none;
  z-index:2;
}
.drop-indicator::before{
  content:"";
  position:absolute;
  left:-3px;
  top:-3px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--surface);
  box-shadow:inset 0 0 0 2px var(--accent-solid);
}
.col .empty-col ~ .drop-indicator{display:none;}

.due-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11.5px;
  font-weight:500;
  height:20px;
  padding:0 6px;
  border-radius:var(--r-sm);
  color:var(--ink-soft);
  background:var(--surface-2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.due-badge .icon{color:inherit !important;opacity:.75;}
.due-badge.is-today{background:var(--st-wait-bg);color:var(--st-wait);}
.due-badge.is-overdue{background:var(--danger-bg);color:var(--danger);}
.due-badge.is-done{background:var(--st-done-bg);color:var(--st-done);}

/* El número de columnas depende del tipo de proyecto. Con más de cuatro, cada
   una mantiene un ancho mínimo y el tablero se desplaza en horizontal. */
@media (min-width:901px){
  .board.is-many{
    grid-template-columns:repeat(var(--cols), minmax(230px, 1fr));
    overflow-x:auto;
  }
}

/* Cabecera de columna: herramientas, límite y arrastre de la propia columna. */
.col-head{cursor:grab;}
.col-head:active{cursor:grabbing;}
.col-tools{display:flex;align-items:center;gap:2px;flex:none;}
.col-tools .col-add{cursor:pointer;}
.col.is-full .col-head .count{color:var(--st-wait);}
.col.is-over .col-head .count{color:var(--danger);font-weight:600;}
.col.is-over{box-shadow:inset 0 0 0 1px var(--danger);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);}
.col.col-dragging{opacity:.45;}
.col.drop-before{box-shadow:-6px 0 0 -3px var(--accent-solid);}
.col.drop-after{box-shadow:6px 0 0 -3px var(--accent-solid);}
.stat-link{
  font:inherit;
  color:var(--accent);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.stat-link:hover{text-decoration:underline;}
@media (hover:none){.col-head{cursor:default;}}

/* Subtareas y repetición en la tarjeta. */
.card-contact{display:flex;align-items:center;gap:5px;min-width:0;margin-top:10px;font-size:12px;color:var(--ink-faint);}
.card-contact .icon{display:inline-flex;flex:none;margin:0;color:var(--ink-faint);}
.card-contact > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-bottom{display:flex;align-items:center;gap:8px;min-width:0;margin-top:9px;}
.card-bottom > .due-badge{margin-left:auto;}
.card-bottom .card-progress{flex:1 1 70px;min-width:0;}
.card-progress .check-progress{display:flex;align-items:center;gap:10px;width:100%;font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;color:var(--ink-soft);}
.card-progress .check-progress-track{display:block;flex:1;min-width:0;height:4px;overflow:hidden;border-radius:99px;background:var(--line-strong);}
.card-progress .check-progress-track > span{display:block;height:100%;border-radius:inherit;background:var(--accent-solid);}
.card-progress .check-progress-value{flex:0 0 4ch;text-align:right;white-space:nowrap;}
.card-bottom .due-badge{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;}
.card .meta .repeat-badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-faint);}