/* 053-trazabilidad-pedido-publica — barra de agrupadores y línea de tiempo.
 *
 * Archivo propio y no un agregado a `paper-dashboard.css`: ese es de un tema de
 * terceros y se pisa al actualizarlo.
 *
 * La consulta pública se abre casi siempre desde el teléfono. Hasta el
 * 2026-09-23 la barra se apilaba en vertical por debajo de 600 px; desde esa
 * fecha se queda horizontal, más compacta — ver el bloque `@media` del final,
 * donde está la decisión y lo que cuesta.
 */

.trz-barra {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  margin: 18px 0 10px;
  padding: 0 4px;
}

.trz-paso {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  min-width: 0;
}

/* La línea que une los pasos. Va detrás del punto y no se dibuja antes del
   primero, para que la barra no arranque con un tramo colgando. */
.trz-paso::before {
  content: '';
  position: absolute;
  top: 9px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: #d8dde3;
  z-index: 0;
}
.trz-paso:first-child::before {
  display: none;
}

.trz-punto {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d8dde3;
  border: 3px solid #d8dde3;
  z-index: 1;
  margin-bottom: 7px;
}

/* 2026-09-23: `word-break: break-word` partía "Preparando"/"Programado" a
   mitad de palabra en la columna angosta -- el rotulo se acorto en el PHP
   (ClassNucleoEstados::$ROTULOS) y ademas se saca el corte forzado, para que
   una palabra o se ve entera o pasa a la linea siguiente, nunca partida. */
.trz-rotulo {
  font-size: 9.5px;
  line-height: 1.2;
  color: #8f9ba6;
  word-break: normal;
  overflow-wrap: normal;
  padding: 0 1px;
}

/* Ya pasó por acá. La linea y el punto entran animados -- ver mas abajo. */
.trz-paso-pasado .trz-punto,
.trz-paso-pasado::before {
  background: #51bcda;
  border-color: #51bcda;
}
.trz-paso-pasado .trz-rotulo {
  color: #5a6570;
}

/* Dónde está ahora. Es el único con énfasis: si todo resalta, nada resalta. */
.trz-paso-actual .trz-punto {
  background: #214761;
  border-color: #214761;
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
  box-shadow: 0 0 0 4px rgba(33, 71, 97, 0.16);
}
.trz-paso-actual::before {
  background: #51bcda;
}
.trz-paso-actual .trz-rotulo {
  color: #214761;
  font-weight: 600;
}

/* --- Movimiento (2026-09-23) ----------------------------------------------
   La barra se va "llenando" paso a paso hasta el estado actual, y cada punto
   entra con un pequeño giro (como si encastrara en su lugar) en vez de
   aparecer de golpe. El delay real de cada paso/evento lo pone el `<script>`
   que arma consulta_pedido_actions.php, via las variables CSS `--seg-delay`
   y `--ev-delay` -- acá solo está la animación en sí, con un valor por
   defecto por si ese script no corriera por algún motivo. */
.trz-paso-pasado::before,
.trz-paso-actual::before {
  transform: scaleX(0);
  transform-origin: left;
  animation: trz-fill-linea .5s ease-out var(--seg-delay, .3s) both;
}
@keyframes trz-fill-linea {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.trz-paso-pasado .trz-punto,
.trz-paso-actual .trz-punto {
  animation: trz-punto-gira .45s cubic-bezier(.2,.8,.3,1) var(--seg-delay, .3s) both;
}
@keyframes trz-punto-gira {
  from { opacity: 0; transform: scale(.3) rotate(-220deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* Todavía no llegó. Queda en el gris de base. */

/* Sin ningún evento clasificable: la barra entera en gris, sin resaltar nada.
   Se muestra igual porque sigue sirviendo de referencia (plan.md D4). */
.trz-paso-neutro .trz-punto {
  background: #e8ecef;
  border-color: #e8ecef;
}

/* --- Línea de tiempo (US2) ------------------------------------------------ */

.trz-linea {
  margin: 14px 0 4px;
  padding-left: 4px;
  text-align: left;
}

.trz-evento {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 9px;
  padding: 7px 0 7px 18px;
  position: relative;
  border-left: 2px solid #e2e7eb;
  opacity: 0;
  animation: trz-evento-entra .4s ease-out var(--ev-delay, 1.2s) both;
}
@keyframes trz-evento-entra {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.trz-evento:first-child {
  padding-top: 2px;
}
.trz-evento:last-child {
  border-left-color: transparent;
  padding-bottom: 2px;
}

.trz-marca {
  position: absolute;
  left: -6px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #51bcda;
  opacity: 0;
  animation: trz-punto-gira .4s cubic-bezier(.2,.8,.3,1) var(--ev-delay, 1.2s) both;
}
.trz-evento:first-child .trz-marca {
  top: 7px;
}

.trz-fecha {
  font-size: 12px;
  color: #8f9ba6;
  white-space: nowrap;
}

.trz-que {
  font-size: 14px;
  color: #3c4a56;
}

/* El retroceso se marca, pero NO como un error: un pedido que vuelve a salir
   después de un intento fallido retrocede de verdad, y el modelo lo permite a
   propósito. Nada de rojo, nada de ícono de alerta — un ámbar suave y una
   flecha de vuelta. */
/* 2026-09-23: el retroceso ya NO lleva texto explicativo ("volvió a...") por
   pedido de Ignacio -- alcanza con la marca visual (ámbar), sin agregarle un
   disclaimer al cliente. Sigue sin ser un error: nada de rojo, nada de ícono
   de alerta. */
.trz-evento-vuelve {
  border-left-color: #e0a44a;
}
.trz-evento-vuelve .trz-marca {
  background: #e0a44a;
}

/* Red de seguridad. `.trz-evento` y `.trz-marca` arrancan en `opacity: 0` y
   dependen de que la animación corra para volverse visibles. En un navegador
   que no entienda `var()` —Android WebView viejo, IE— la declaración
   `animation` entera es inválida, la animación nunca corre, y la línea de
   tiempo quedaría en blanco: no una pantalla sin animación, una pantalla sin
   contenido. Ahí se apaga el movimiento y se muestra todo quieto.

   Los navegadores que sí soportan `var()` ignoran este bloque. */
@supports not (--prueba: 0) {
  .trz-evento,
  .trz-marca,
  .trz-paso-pasado .trz-punto,
  .trz-paso-actual .trz-punto {
    opacity: 1;
    animation: none;
  }
  .trz-paso-pasado::before,
  .trz-paso-actual::before {
    transform: scaleX(1);
    animation: none;
  }
}

/* --- Sin movimientos todavía (US3) ---------------------------------------- */

/* Deliberadamente neutro: no es un error ni una advertencia. Este mismo bloque
   sale para un pedido recién creado y para un número que no existe — el CRM no
   los distingue y la pantalla no debe insinuar cuál de los dos es (ver el
   comentario de T024 en consulta_pedido_actions.php). */
.trz-sin-movimientos {
  margin: 4px 0 2px;
  padding: 14px 16px;
  background: #f6f8f9;
  border: 1px solid #e2e7eb;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #3c4a56;
}
.trz-sin-movimientos span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #8f9ba6;
}

@media (max-width: 600px) {
  .trz-sin-movimientos {
    font-size: 15px;
  }
  .trz-evento {
    gap: 0 7px;
  }
  .trz-que {
    font-size: 15px;
  }
  /* --- La barra en el teléfono (2026-09-23) --------------------------------

     Hasta hoy se apilaba en vertical. Ignacio eligió la **opción D** sobre un
     comparativo de 7 variantes medidas a 320, 375, 390 y 414 px: la barra se
     queda HORIZONTAL, con los puntos y la línea más chicos, y el rótulo con
     permiso de bajar a un segundo renglón (lo hace solo, por el
     `word-break: normal` de la regla base: parte entre palabras, nunca dentro
     de una).

     **Lo que esto cuesta, medido antes de elegir y aceptado**: a 9.5 px el
     rótulo más largo ("Programado") mide 62 px y "Preparando" 58 px, mientras
     que el ancho disponible por paso es de 44 px a 320 px, 53 a 375, 56 a 390
     y 60 a 414. Como son palabras sueltas y no se parten, en los anchos chicos
     son más anchas que su columna y se pisan entre sí: a 320 px se superponen
     3 pares, a 375 px también, a 390 px 2. Recién a 414 px dejan de pisarse
     (quedan 2 rótulos apenas más anchos que su columna, sin llegar a chocar).

     Es una decisión consciente, no un descuido: se prefirió el costo en el
     teléfono chico antes que las alternativas (vertical compacta, sólo puntos,
     o scroll lateral). Si alguna vez se quiere volver atrás, la versión
     vertical está en el commit anterior a éste. */
  .trz-punto {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-bottom: 5px;
  }
  .trz-paso-actual .trz-punto {
    width: 19px;
    height: 19px;
    margin-bottom: 3.5px;
    box-shadow: 0 0 0 3px rgba(33, 71, 97, 0.16);
  }
  .trz-paso::before {
    top: 7px;
    height: 2px;
  }
}