/* ============ BARRA DE PROGRESO CON EL CARRO RECOLECTOR ============
   Componente compartido (ver barra-progreso.js): lo usan las pantallas del
   sistema y las de PQR, que corren aparte en iframe.

   CON PORCENTAJE  el carro avanza con la barra, con las ruedas girando, y la
                   basura que tiene delante desaparece al pasar (la recoge).
                   El progreso es real, asi que la animacion cuenta algo cierto.

   SIN PORCENTAJE  el servidor esta procesando: el carro va y vuelve despacio,
                   dando la vuelta en cada extremo, y la pista sin basura.
                   Estas esperas duran MINUTOS: lo que se mira tanto tiempo
                   tiene que moverse poco.                                  */
.progreso { margin-top: 12px; }

/* La pista: envuelve a la barra y le deja sitio arriba al carro. Hace falta
   porque `.progreso-barra` recorta su contenido --- tiene que hacerlo para que
   el relleno no se salga de las esquinas redondeadas. */
.progreso-pista { position: relative; height: 52px; }
.progreso-barra {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 10px; background: #eef2f5; border-radius: var(--r-pildora); overflow: hidden;
  /* La basura por recoger. NO son elementos del documento: es el fondo de la
     pista, y el relleno la va tapando al avanzar --- sin un nodo por mota,
     que en una pantalla con mil filas de tabla importa. */
  background-image: radial-gradient(circle, #c9b89a 1.4px, transparent 1.5px);
  background-size: 13px 100%;
  background-position: 6px center;
}
.progreso-barra span {
  display: block; height: 100%; width: 0; border-radius: var(--r-pildora);
  background: #1baf7a; transition: width .25s ease;
}
.progreso-barra.indeterminada span { width: 35%; animation: progreso-vaiven 1.1s ease-in-out infinite; }
@keyframes progreso-vaiven {
  0% { margin-left: 0; } 50% { margin-left: 65%; } 100% { margin-left: 0; }
}
.progreso-texto { font-size: 12px; color: var(--tinta-suave, #5b6b78); margin-top: 6px; }

/* ---- el carro ---- */
.progreso-camion {
  position: absolute; bottom: 2px; left: 0; width: 62px; height: 38px;
  /* La trompa del carro (no su centro) va en la punta de lo recogido. */
  transform: translateX(-88%);
  transition: left .25s ease; pointer-events: none;
}
.progreso-camion svg { width: 100%; height: 100%; overflow: visible; display: block; }
.progreso-camion .rueda {
  transform-box: fill-box; transform-origin: center;
  animation: camion-rueda .6s linear infinite;
}
.progreso-camion .carroceria { animation: camion-traqueteo .32s ease-in-out infinite alternate; }
.progreso-camion .humo { opacity: 0; animation: camion-humo 1.4s ease-out infinite; }
.progreso-camion .velocidad { animation: camion-velocidad .6s ease-in-out infinite alternate; }
@keyframes camion-velocidad { from { opacity: .35; } to { opacity: 1; } }
@keyframes camion-rueda { to { transform: rotate(360deg); } }
@keyframes camion-traqueteo { from { transform: translateY(0); } to { transform: translateY(-.7px); } }
@keyframes camion-humo {
  0% { opacity: .35; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-5px) translateY(-3px); }
}

/* ---- sin porcentaje: ida y vuelta, despacio ---- */
.progreso-pista.sin-final .progreso-barra { background-image: none; }
/* Aqui el que se mueve es el carro: la franja verde de vaiven moveria otra
   cosa a otro ritmo y la pantalla se ve desordenada. */
.progreso-pista.sin-final .progreso-barra.indeterminada span { visibility: hidden; }
.progreso-pista.sin-final .progreso-camion {
  transition: none; transform: translateX(-50%);
  animation: camion-vaiven 9s ease-in-out infinite;
}
/* Da la vuelta en cada extremo (mismo ciclo que el vaiven). */
.progreso-pista.sin-final .progreso-camion svg {
  transform-origin: center; animation: camion-giro 9s steps(1, end) infinite;
}
.progreso-pista.sin-final .progreso-camion .rueda { animation-duration: .9s; }
@keyframes camion-vaiven { 0% { left: 6%; } 50% { left: 94%; } 100% { left: 6%; } }
@keyframes camion-giro { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

/* Con movimiento reducido el carro no anda solo: la barra avanza y ya. No es
   un detalle menor --- a algunas personas una animacion en bucle les produce
   malestar de verdad. */
/* ---- la barra flotante (ver `barraFlotante` en barra-progreso.js) ---- */
.progreso-flotante {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10000;
  width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 16px 14px;
  background: var(--lienzo, #fff); border: 1px solid var(--borde, #d6dde4); border-radius: var(--r-tarjeta);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  /* Entra medio segundo despues: lo que termina antes no llega a mostrarse. */
  animation: progreso-flotante-entra .2s ease .5s both;
}
.progreso-flotante .progreso { margin-top: 4px; }
.progreso-flotante-titulo { font-size: 13px; font-weight: 600; }
@keyframes progreso-flotante-entra {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .progreso-camion, .progreso-camion svg, .progreso-camion .rueda,
  .progreso-camion .carroceria, .progreso-camion .humo, .progreso-camion .velocidad,
  .progreso-pista.sin-final .progreso-camion,
  .progreso-pista.sin-final .progreso-camion svg {
    animation: none !important; transition: none;
  }
  .progreso-camion .humo { display: none; }
  .progreso-flotante { animation: none; }
  .progreso-barra.indeterminada span { animation: none; width: 100%; opacity: .45; }
  /* Quieto el carro, la franja fija es la que dice que algo esta pasando. */
  .progreso-pista.sin-final .progreso-barra.indeterminada span { visibility: visible; }
}