/* Turnos de la bitácora: la tarjeta de cada turno con sus cifras en la cabecera, los
   eventos tipados (agente / avance / herramienta / estado / autorización) con su hora a la
   derecha, la tanda de herramientas plegada, el turno en curso con su testigo y el botón
   «↓ al final» del seguimiento. La ficha y la prosa viven en bitacora.css. */

.bitacora-sec { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.bit-cab { align-items: baseline; }
.bit-resumen { color: var(--faint); font-size: var(--fs-xs); }
.bit-cuerpo { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.btn-mas { align-self: stretch; min-height: 40px; font-weight: 500; color: var(--muted); }
.btn-mas[hidden] { display: none; }
.vacio { margin: 0; color: var(--faint); font-size: var(--fs-bit-sm); }
.relleno { flex: 1; }

/* ── Turno ─────────────────────────────────────────────────────────────── */
.turno {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 0;
}
.turno[open] { border-color: var(--border-hi); }
/* El turno en curso se distingue de lejos: borde ámbar y un halo tenue. */
.turno.vivo {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), var(--sh-sm);
}
.turno-cab { padding: var(--sp-3); cursor: pointer; list-style: none; }
.turno-cab::-webkit-details-marker { display: none; }
.turno-linea { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; row-gap: 4px; }
.turno-quien { color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.turno-hora { color: var(--faint); font-size: var(--fs-xs); white-space: nowrap; }
.turno-ruta { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turno-cifras {
  display: inline-flex; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cifra-tok { color: var(--accent); }
.cifra-err { color: var(--conflict); }
/* El pedido del usuario, como burbuja de chat a la derecha (SPEC-MULTI-MAD-MOVIL §5.4):
   ámbar tenue, pegada al borde y angosta antes que el texto del cerebro, que ocupa todo
   el ancho — así se distingue de un vistazo quién dijo qué. */
.turno-pedido {
  margin: var(--sp-2) 0 0;
  margin-left: auto;
  width: fit-content;
  max-width: 88%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-soft);
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
  font-size: var(--fs-bit-sm); line-height: 1.45; color: var(--ink); font-weight: 500; overflow-wrap: anywhere;
}
.turno:not([open]) .turno-pedido { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.turno-cuerpo { padding: 0 var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.turno-cuerpo:empty { display: none; }
.turno-pie { padding-top: var(--sp-2); border-top: 1px dashed var(--border); color: var(--ok); font-size: var(--fs-bit-sm); font-variant-numeric: tabular-nums; }
.turno-pie.error { color: var(--conflict); }

/* ── Eventos: marca de tipo a la izquierda, contenido, hora relativa a la derecha ─ */
.ev {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  min-width: 0; padding-left: var(--sp-3);
  border-left: 2px solid var(--border);
}
.ev-hora {
  flex: 0 0 auto; margin-left: auto; padding-top: 3px;
  color: var(--faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ev-texto { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ev-icono { flex: 0 0 auto; }
/* La respuesta del cerebro, como bloque de panel (SPEC §5.4): se lee de corrido, sin la
   marca lateral que llevan avance/estado/herramientas. */
.ev-agente { border-left: 0; padding: var(--sp-2) var(--sp-3); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); }
.ev-agente .prosa { flex: 1; min-width: 0; }
.ev-agente .ev-hora { padding-top: 0; }
/* Avance (📣): una línea chica y discreta, el megáfono ya la distingue de sobra. */
.ev-avance { border-left-color: var(--border); color: var(--faint); font-size: var(--fs-bit-sm); font-weight: 400; line-height: 1.4; padding-top: 2px; padding-bottom: 2px; }
.ev-estado { font-size: var(--fs-bit-sm); color: var(--muted); line-height: 1.4; padding-top: 2px; padding-bottom: 2px; }
.ev-estado.tono-ok { border-left-color: var(--ok); color: var(--ok); }
.ev-estado.tono-wait { border-left-color: var(--wait); color: var(--wait); }
.ev-estado.tono-conflict { border-left-color: var(--conflict); color: var(--conflict); }
.ev-estado.tono-muted { color: var(--faint); }
/* Lo efímero (llegó por el canal en vivo y todavía no está persistido) se ve apenas más tenue. */
.ev.efimero { opacity: 0.88; }

/* Herramientas: `details` con la tanda resumida en el summary; un tap la abre. */
.ev-pasos { display: block; padding-left: 0; border-left: 0; }
.tanda-cab {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; row-gap: 2px;
  min-height: var(--toque); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  border-left: 2px solid var(--border);
  cursor: pointer; list-style: none;
  font-size: var(--fs-bit-sm); color: var(--muted);
  background: color-mix(in srgb, var(--ground) 45%, transparent);
}
.tanda-cab::-webkit-details-marker { display: none; }
.tanda-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.tanda-punto.error { background: var(--conflict); }
.tanda-punto.activo { background: var(--accent); animation: latido 1.2s ease-in-out infinite; }
.tanda-n { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tanda-tools { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44%; }
.tanda-err { color: var(--conflict); font-weight: 600; white-space: nowrap; }
.tanda-ms { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tanda-flecha { color: var(--faint); transition: transform 150ms; }
.ev-pasos[open] .tanda-flecha { transform: rotate(180deg); }
.tanda-cab .ev-hora { padding-top: 0; }
.pasos-lista { margin: var(--sp-1) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.paso-tool {
  padding: var(--sp-1) var(--sp-2);
  background: var(--ground); border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; min-width: 0;
}
.paso-mas {
  padding: var(--sp-1) var(--sp-2); text-align: center; cursor: pointer;
  color: var(--accent); border: 1px dashed var(--border); border-radius: var(--r-sm);
}
.paso-tool.error { border-color: color-mix(in srgb, var(--conflict) 50%, var(--border)); }
.paso-tool.corriendo { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.paso-linea { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; font-size: var(--fs-bit-sm); }
.paso-icono { flex: 0 0 14px; color: var(--ok); text-align: center; }
.paso-tool.error .paso-icono { color: var(--conflict); }
.paso-tool.corriendo .paso-icono { color: var(--accent); }
.paso-nombre { flex: 0 0 auto; color: var(--ink); font-weight: 600; }
.paso-arg { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso-ms { flex: 0 0 auto; color: var(--faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.paso-res {
  margin-top: 2px; padding-left: calc(14px + var(--sp-2));
  color: var(--faint); font-size: var(--fs-xs); line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Paso abierto (un tap): argumento y resultado enteros, con saltos de línea. */
.paso-tool.expandido .paso-linea { flex-wrap: wrap; }
.paso-tool.expandido .paso-arg { flex-basis: 100%; white-space: pre-wrap; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.paso-tool.expandido .paso-res { display: block; }

/* Autorización: donde el turno quedó frenado esperando una decisión. */
.ev-auth {
  border-left-color: var(--wait);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--wait) 8%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ev-auth.resuelta { border-left-color: var(--ok); background: transparent; }
.ev-auth.sin-respuesta { border-left-color: var(--border-ctl); background: transparent; }
.auth-icono { flex: 0 0 auto; font-size: var(--fs-md); }
.auth-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.auth-linea { display: flex; align-items: center; gap: var(--sp-2); }
.auth-rotulo { color: var(--faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.auth-pregunta { color: var(--ink); font-size: var(--fs-bit); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.auth-detalle { color: var(--muted); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.auth-estado { font-size: var(--fs-xs); color: var(--muted); }
.auth-estado.tono-wait { color: var(--wait); }

/* ── Turno en curso: el testigo del escritorio (BusyLine) ──────────────── */
.vivo-testigo {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 32px; padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.vivo-frame { flex: 0 0 auto; font-size: var(--fs-md); color: inherit; }
.vivo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: var(--fs-xs); }

/* ── Botón «↓ al final» del seguimiento ────────────────────────────────── */
/* Píldora CHICA y centrada sobre el composer: es un aviso al que se vuelve de vez en
   cuando, no una acción principal. Con el alto táctil completo y pegada al borde derecho
   tapaba la última línea de la bitácora, que es justo lo que uno está leyendo. */
.ir-final {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: var(--z-hoja);
  min-height: 26px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-pill);
  background-image: var(--accent-grad); background-color: var(--accent); color: var(--on-accent);
  box-shadow: var(--sh-md);
  font: 600 var(--fs-sm) / 1 inherit;
  transition: bottom 150ms ease;
}
.ir-final[hidden] { display: none; }