/* ==========================================================================
   traza.css — la trayectoria contada como una traza de red.

   Cuarta capa independiente (estilo.css → cinematico.css → menu-soc.css →
   no-pulsar.css → esta). Se quita entera borrando su <link> y el <script> de
   traza.js: sin ella el bloque queda como una lista de texto monoespaciado,
   fea pero legible.

   Regla heredada del proyecto: aquí NO se oculta nada por defecto. La salida
   solo se esconde bajo `.traza[data-interactiva]`, atributo que pone el
   propio traza.js justo después de enganchar el clic — el mismo script que
   la esconde es el que la enciende, así que no pueden desincronizarse.
   ========================================================================== */

.traza{
  margin:52px 0 0;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:8px;
  overflow:hidden;
}

/* ---------- la orden ------------------------------------------------------
   Nace con `hidden` en el HTML: sin JavaScript no haría nada y la salida ya
   está ahí abajo entera, así que un botón muerto solo estorbaría. */
.traza-orden{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  width:100%; margin:0; padding:14px 20px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--texto); text-align:left;
  background:none; border:0; border-bottom:1px solid var(--linea-suave);
  cursor:pointer;
  transition:background .16s ease;
}
.traza-orden:hover{background:var(--panel2)}
.traza-usuario{color:var(--oro)}
.traza-cursor{
  font-weight:400; color:var(--oro);
  animation:traza-cursor 1.05s step-end infinite;
}
@keyframes traza-cursor{50%{opacity:0}}
/* Mientras imprime, el cursor deja de parpadear: está ocupado. */
.traza[data-corriendo] .traza-cursor{animation:none; opacity:.35}
.traza[data-corriendo] .traza-orden{cursor:default}

/* ---------- la salida ---------- */
.traza-salida{
  padding:14px 20px 18px;
  font-family:var(--mono); font-size:12.5px; line-height:1.5;
  color:var(--texto-2);
  /* Red de seguridad: si algún nodo se alarga, que se desplace este bloque y
     no la web entera. */
  overflow-x:auto;
}
.traza-titulo{margin:0 0 10px; color:var(--texto-3)}
.traza-total{
  margin:12px 0 0; padding-top:10px;
  border-top:1px solid var(--linea-suave);
  color:var(--oro); letter-spacing:.08em;
}

.traza-saltos{margin:0; padding:0; list-style:none}
.traza-saltos li{
  display:grid;
  grid-template-columns:2ch minmax(0,1fr) auto;
  gap:1px 16px;
  padding:5px 0;
}
.traza-saltos .salto{color:var(--texto-3); text-align:right}
.traza-saltos .nodo{color:var(--texto); word-break:break-word}
.traza-saltos .nodo i{font-style:normal; color:var(--texto-3)}
/* Números tabulares: las columnas de milisegundos tienen que cuadrar. */
.traza-saltos .ms{color:var(--oro); font-variant-numeric:tabular-nums;
  white-space:nowrap}
.traza-saltos .nota{grid-column:2 / -1; font-size:11.5px; color:var(--texto-3)}

@media (max-width:620px){
  .traza-saltos li{grid-template-columns:2ch minmax(0,1fr)}
  .traza-saltos .ms{grid-column:2; justify-self:start}
  .traza-saltos .nota{grid-column:2}
}

/* ---------- impresión salto a salto ---------------------------------------
   Solo cuando traza.js ha tomado el control. Se usa display y no opacity a
   propósito: una terminal crece según escribe, no revela huecos que ya
   estaban reservados. */
.traza[data-interactiva] .traza-linea:not([data-visto]){display:none}

/* Antes de la primera ejecución no hay nada que enmarcar: sin esto queda una
   caja vacía de 32 px bajo la orden. Si el navegador no entiende :has(), se
   ignora la regla y solo sobra ese hueco. */
.traza[data-interactiva] .traza-salida:not(:has(.traza-linea[data-visto])){
  padding:0;
}

/* ---------- movimiento reducido: la función se queda, el adorno no -------- */
@media (prefers-reduced-motion:reduce){
  .traza-orden{transition:none}
  .traza-cursor{animation:none}
}

/* ---------- impresión (papel) ----------
   En el dossier no hay quien pulse nada: la salida entera y sin botón. */
@media print{
  .traza-orden{display:none}
  .traza[data-interactiva] .traza-linea:not([data-visto]){display:revert}
  .traza{break-inside:avoid}
}