/* Tablero de tareas: columnas, segmentado y anatomía de la tarjeta (volanta, titular,
   bajada). Los tokens viven en app.css; el resto de la tarjeta (avance, pie) y el
   detalle de tarea están en tablero-detalle.css; los controles genéricos, en
   componentes.css; la lista de proyectos, en proyectos.css. */

.cuerpo, .lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.cabecera-vista { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── Selector de columna (con contador) ─────────────────────────────────── */
.segmentado {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.seg {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 36px;
  padding: 0 3px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--faint);
  font: 500 12.5px / 1 inherit;
  white-space: nowrap;
}

.seg.activa { background: var(--fill); color: var(--ink); font-weight: 600; }
/* Cada celda toma el ancho de su contenido (no tres tercios iguales): así entran las
   tres etiquetas y el filtro en un celular angosto. Si aun así no alcanza, la etiqueta
   se recorta antes que empujar el filtro afuera. */
.seg-tablero { display: flex; }
.seg-tablero .seg { flex: 1 1 auto; }
.seg-et { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* El contador es parte del selector: cuántas hay en cada columna sin ir a mirar. */
.seg-n {
  flex: 0 0 auto;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--muted);
  font-size: 11px; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.seg.activa .seg-n { background: var(--accent); color: var(--on-accent); }

/* ── Pista de columnas (deslizable) ─────────────────────────────────────── */
/* Las tres columnas viven una al lado de la otra; sólo la activa ocupa alto (relative),
   las otras quedan absolutas a ±(100 % + separación). El margen negativo + padding deja
   respirar las sombras de las cards sin que se vea la columna vecina. */
.tablero {
  overflow: hidden;
  margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-3) * -1);
  padding: 0 var(--sp-4) var(--sp-3);
  touch-action: pan-y;
}

.pista {
  --sep: calc(var(--sp-4) * 2);
  position: relative;
  transform: translateX(calc(var(--activa, 0) * (-100% - var(--sep))));
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pista.arrastrando, .pista.sin-animar { transition: none; }

.panel-col {
  position: absolute; top: 0;
  left: calc(var(--i, 0) * (100% + var(--sep)));
  width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-3);
}

.panel-col.activa { position: relative; }

/* ── Card de tarea ──────────────────────────────────────────────────────── */
/* Cuatro niveles de lectura con SALTO de tamaño entre uno y otro: volanta (10 px en
   versalitas), titular (15,5 a 18 px según lo que pese la tarea), bajada (12,5 px) y pie
   (10 px). El salto es lo que deja leer la lista en diagonal: con todo el texto entre 10
   y 14 px —como estaba— las cards se veían todas iguales y había que leerlas enteras
   para saber cuál era cuál. */
.card-tarea {
  position: relative;
  /* Gap chico y márgenes propios abajo: la volanta y el titular son UNA unidad (se leen
     juntos), y el aire de verdad va entre esa unidad y lo que sigue. */
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px var(--sp-3) 10px calc(var(--sp-3) + 6px);
}

.card-tarea > .ct-bajada { margin-top: 3px; }
.card-tarea > .ct-marcas { margin-top: 4px; }

/* Franja de estado, como en el escritorio: verde trabajando, ámbar esperando. */
.card-tarea::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--border-ctl);
}

.card-tarea.franja-ok::before { background: var(--ok); }
.card-tarea.franja-wait::before { background: var(--wait); }
.card-tarea.franja-conflict::before { background: var(--conflict); }
/* La tarea que corre AHORA es la que hay que mirar: se levanta del fondo con un velo
   verde. La terminada se hunde: sin sombra, apagada y compacta. Ese contraste entre
   cards vecinas es el que le da ritmo a la lista. */
.card-tarea.viva {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
  background-image: linear-gradient(color-mix(in srgb, var(--ok) 7%, transparent), transparent 65%);
  /* Resplandor ámbar suave además de la franja: el turno vivo se nota sin que haga
     falta leer el color exacto de la barra lateral. */
  box-shadow: var(--sh-sm), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 22px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}

.card-tarea.viva::before { animation: respirar 1.6s ease-in-out infinite; }
.card-tarea.hecha { opacity: 0.82; box-shadow: none; }
.card-tarea.hecha::before { background: var(--done); }

/* Iniciar, en la card de una tarea del backlog: a la derecha y separado del pie, para que
   no se toque queriendo abrir la tarea. */
.ct-acciones { display: flex; justify-content: flex-end; margin-top: 2px; }

/* ── Volanta ────────────────────────────────────────────────────────────── */
/* El renglón de arriba, en versalitas: código, tipo de trabajo y lo que urge. Los datos
   se separan con un punto medio, como en una ficha impresa — no necesitan una cajita de
   color cada uno para no confundirse entre sí, y sin cajitas el titular queda solo en
   el centro de la atención. */
.ct-volanta {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--faint);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.ct-volanta > span + span:not(.estado-chip)::before {
  content: '·';
  margin-right: 6px;
  color: var(--border-ctl);
  font-weight: 400;
  letter-spacing: 0;
}

.ct-ref {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ct-tipo {
  min-width: 0;
  color: var(--tinta, var(--faint));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rutina: la tarea corre sola cada tanto. Va en el color de acento porque es la marca que
   la separa de una tarea normal en proceso (el escritorio hace lo mismo con su chip). */
.ct-rutina { flex: 0 0 auto; color: var(--accent); white-space: nowrap; }

/* Sólo se dibuja lo que NO es el default: la prioridad normal no distingue nada. */
.ct-prio { flex: 0 0 auto; white-space: nowrap; }
.ct-prio.prio-alta, .ct-prio.prio-menor { padding: 0; background: none; }

/* El estado dentro de la volanta vuelve a caja baja: es una etiqueta, no un dato. */
.ct-volanta .estado-chip { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ref { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

.prio {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  font: 700 10px / 1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.prio-alta { color: var(--conflict); background: color-mix(in srgb, var(--conflict) 16%, transparent); }
.prio-normal { color: var(--wait); background: color-mix(in srgb, var(--wait) 14%, transparent); }
.prio-menor { color: var(--faint); background: var(--fill); }

/* Tipo de trabajo: categoría → color de la rampa categórica del escritorio. */
.tipo {
  --tinta: var(--faint);
  min-width: 0; max-width: 38%;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 14%, transparent);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tipo-teal { --tinta: var(--tipo-teal); }
.tipo-cielo { --tinta: var(--tipo-cielo); }
.tipo-violeta { --tinta: var(--tipo-violeta); }
.tipo-oro { --tinta: var(--tipo-oro); }
.tipo-rosa { --tinta: var(--tipo-rosa); }
.tipo-rojo { --tinta: var(--conflict); }

/* Pastilla sin contorno: el color sólo vive en el fondo tenue y en el punto/ícono. */
.estado-chip {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 13%, transparent);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.punto-estado { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.anillo {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: girar 0.9s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes respirar { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Titular y bajada ───────────────────────────────────────────────────── */
.titulo-tarea {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  margin-top: 2px;
  color: var(--ink);
  font-size: 15.5px; font-weight: 600; line-height: 1.27;
  /* Tracking apenas negativo: a este cuerpo la sans del sistema se abre de más y el
     titular pierde densidad. `balance` reparte las dos líneas en vez de dejar una sola
     palabra colgando abajo. */
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Lo urgente se lee en el TAMAÑO del titular, no en otra cajita de color: una P1 pesa
   más en la página y una P3, menos. */
.card-tarea.p1 .titulo-tarea { font-size: 17px; letter-spacing: -0.02em; }
.card-tarea.p3 .titulo-tarea { font-size: 14.5px; color: var(--muted); }

/* La bajada: de qué se trata la tarea, en dos líneas. Es lo que faltaba para que dos
   tareas con títulos parecidos dejaran de ser la misma card. */
.ct-bajada {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px; line-height: 1.5;
  text-wrap: pretty;
}

.card-tarea.hecha .titulo-tarea { color: var(--muted); font-size: 14.5px; }
.card-tarea.hecha .ct-bajada { -webkit-line-clamp: 1; color: var(--faint); }

/* ── Orden del tablero (js/ui/ordenTablero.js) ──────────────────────────── */
.fila-orden { display: flex; align-items: center; gap: var(--sp-2); }
.fila-orden .segmentado { flex: 1; min-width: 0; }

.btn-orden {
  flex: 0 0 auto; width: var(--toque); height: var(--toque);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--faint);
}
.btn-orden.activo { color: var(--accent); border-color: var(--accent); }

/* Panel de la hoja: misma anatomía que `.hoja-turnos` de testigo.css. */
.hoja-orden {
  width: 100%; max-width: 420px; max-height: 80vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding-bottom: max(var(--sp-2), var(--safe-bottom));
  background-color: var(--panel); background-image: var(--grad-superficie);
  backdrop-filter: var(--blur-vidrio); -webkit-backdrop-filter: var(--blur-vidrio);
  border: 1px solid var(--line-hi); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-md);
  transform: translateY(16px); transition: transform 200ms ease;
}
.hoja-capa.abierta .hoja-orden { transform: translateY(0); }

.orden-lista { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-2) var(--sp-1); }
.orden-op {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; min-height: var(--toque); padding: var(--sp-2) var(--sp-3);
  background: transparent; border: 0; border-radius: var(--r-md);
  color: var(--ink); text-align: left;
}
.orden-op .orden-desc { font-size: var(--fs-xs); color: var(--faint); }
.orden-op.activa { background: var(--fill); }
.orden-op.activa .orden-et { color: var(--accent); font-weight: 700; }

/* El sentido (desc/asc), como una fila propia separada de la lista de criterios. */
.orden-dir {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: calc(100% - var(--sp-4)); margin: var(--sp-1) var(--sp-2) 0;
  min-height: var(--toque); padding: var(--sp-2) var(--sp-3);
  background: var(--fill); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--ink); font: 600 var(--fs-sm) / 1 inherit;
}
.orden-dir .orden-chev { color: var(--faint); font-size: var(--fs-md); }