/* Testigo con VARIAS tareas a la vez: el renglón resumen (js/testigoResumen.js) y la hoja
   que lo despliega (js/testigoHoja.js). El detalle de una sola tarea sigue en vivo.css. */

/* ── El renglón resumen ─────────────────────────────────────────────────── */
.testigo-resumen {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 26px;
}

.testigo-resumen[hidden] { display: none; }

/* En resumen la barra muestra el panorama y nada más: ni ref, ni título, ni acción.
   El `hidden` del JS no alcanza: `.testigo-fila` trae su propio `display: flex`, que le
   gana al `display: none` que el navegador le da a [hidden]. Se apaga por clase. */
.testigo.resumen { touch-action: none; }
.testigo.resumen .testigo-fila { display: none; }
.testigo-fila[hidden] { display: none; }

.res-n {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}

.res-detalle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.res-detalle[hidden] { display: none; }

/* ── La hoja de turnos ──────────────────────────────────────────────────── */
.hoja-capa {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(2, 6, 23, 0.55);
  opacity: 0;
  transition: opacity 180ms ease;
}

.hoja-capa.abierta { opacity: 1; }
.hoja-capa[hidden] { display: none; }

.hoja-turnos {
  width: 100%;
  max-width: 520px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  padding-bottom: max(var(--sp-2), var(--safe-bottom));
  background: var(--panel);
  border: 1px solid var(--border-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-turnos { transform: translateY(0); }

/* El agarre es la zona del gesto: acá el dedo arrastra la hoja, no scrollea la lista. */
.hoja-agarre {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  touch-action: none;
  cursor: grab;
}

.hoja-tirador {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: var(--r-pill);
  background: var(--border-ctl);
}

.hoja-titulo {
  flex: 1 1 auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.hoja-cerrar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--faint);
  font-size: var(--fs-md);
}

.hoja-lista {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 0 var(--sp-2) var(--sp-2);
}

/* ── Una tarea en curso, dentro de la hoja ──────────────────────────────── */
.turno-fila {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--toque);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  color: var(--ink);
}

.turno-fila:active { background: var(--panel2); }
.turno-fila.aca { background: var(--accent-soft); }

.turno-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.turno-top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

.turno-ref { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-size: var(--fs-sm); }

.turno-titulo,
.turno-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turno-titulo { flex: 1 1 auto; font-size: var(--fs-md); }
.turno-sub { font-size: var(--fs-sm); color: var(--faint); }

.turno-seg {
  flex: 0 0 auto;
  font: 600 var(--fs-md) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--wait);
}

.turno-aca {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* El anillo de la fila es el mismo del testigo, un punto más chico. */
.turno-fila .testigo-anillo { width: 14px; height: 14px; --tono: var(--wait); }