/* Turno en vivo: el testigo anclado arriba de las pestañas (js/testigo.js) y las marcas
   "en curso" de las cards (js/marcas.js). El tono entra por una variable propia, como en
   la hoja de autorización: tiñe el borde, el anillo y el cronómetro sin arrastrar el
   color al texto que hay que leer. */

.testigo { --tono: var(--wait); }
.testigo.tono-ok { --tono: var(--ok); }
.testigo.tono-conflict { --tono: var(--conflict); }
.testigo.tono-muted { --tono: var(--faint); }

/* ── La barra ───────────────────────────────────────────────────────────── */
/* Es una fila más de la grilla de la app (entre el contenido y las pestañas): el
   contenido se achica y el composer, que es sticky al pie del contenido, queda encima
   de la barra en vez de debajo. Las pestañas ya cubren el safe-area inferior. */
.testigo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 9%, var(--panel)) 0%, var(--panel) 100%);
  border-top: 1px solid color-mix(in srgb, var(--tono) 45%, var(--border));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.testigo[hidden] { display: none; }

/* Modo compacto (estoy dentro de la tarea que trabaja): el mismo renglón único, pero con
   el cronómetro y la acción en curso. El título ya está arriba y el último 📣 en la
   bitácora, abajo de todo: repetirlos acá sería gastar la franja en nada. */
.testigo.compacto { flex-direction: row; align-items: center; gap: var(--sp-2); }
.testigo.compacto .testigo-ref,
.testigo.compacto .testigo-titulo { display: none; }
.testigo.compacto .testigo-fila { flex: 0 0 auto; }
.testigo.compacto .testigo-detalle { flex: 1 1 auto; min-width: 0; }

/* Hilo de luz que recorre el borde mientras trabaja: se ve vivo aun sin leerlo. */
.testigo.vivo::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--tono) 50%, transparent 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: recorrer 2.2s linear infinite;
  opacity: 0.9;
}

.testigo-fila {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 26px;
}

.testigo-ref { flex: 0 0 auto; color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }

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

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

.testigo-accion {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.testigo.fin .testigo-accion { font-family: inherit; font-size: var(--fs-sm); color: var(--ink); }

.testigo-paso {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.testigo.tono-conflict .testigo-paso { color: var(--conflict); }

/* ── El anillo: gira mientras trabaja, se cierra al terminar ───────────── */
.testigo-anillo {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tono) 28%, transparent);
  border-top-color: var(--tono);
  animation: girar 0.9s linear infinite;
}

.testigo.fin .testigo-anillo {
  animation: none;
  border-color: var(--tono);
  background: color-mix(in srgb, var(--tono) 20%, transparent);
  box-shadow: 0 0 10px 0 color-mix(in srgb, var(--tono) 55%, transparent);
}

/* ── Entrar y salir sin golpe ───────────────────────────────────────────── */
.testigo.entrando { animation: subir 0.32s ease-out; }
.testigo.saliendo { transform: translateY(40%); opacity: 0; transition: transform 0.32s ease-in, opacity 0.32s ease-in; }

@keyframes subir {
  from { transform: translateY(40%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes girar { to { transform: rotate(360deg); } }

@keyframes recorrer {
  from { background-position: -60% 0; }
  to { background-position: 160% 0; }
}

/* Los toasts viven arriba de las pestañas: con la barra visible suben un escalón. */
.app:has(> .testigo:not([hidden])) .toasts {
  bottom: calc(var(--alto-tabs) + var(--safe-bottom) + 84px);
}

/* ── Marcas "en curso" en las cards ─────────────────────────────────────── */
.vivo-marca { --tono: var(--wait); }
.vivo-marca[data-tono='ok'] { --tono: var(--ok); }
.vivo-marca[data-tono='conflict'] { --tono: var(--conflict); }
.vivo-marca[data-tono='muted'] { --tono: var(--faint); }

.vivo-marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tono) 12%, transparent);
  color: var(--tono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vivo-marca[hidden] { display: none; }

.vivo-punto {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tono);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tono) 60%, transparent);
  animation: latido 1.3s ease-out infinite;
}

.vivo-marca.fin .vivo-punto { animation: none; box-shadow: none; }

@keyframes latido {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tono) 60%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Movimiento reducido: la información queda, el adorno no ───────────── */
@media (prefers-reduced-motion: reduce) {
  .testigo-anillo, .vivo-punto, .testigo.vivo::before, .testigo.entrando { animation: none; }
  .testigo-anillo { border-color: var(--tono); border-top-color: var(--tono); opacity: 0.85; }
  .testigo.saliendo { transition: none; }
}