/* ==========================================================================
   Reglas de envío — el guion
   ==========================================================================

   Solo los TIEMPOS de esta escena. El aspecto esta en mockups/_base.css.

   Los keyframes llevan prefijo `rg-` porque los keyframes NO tienen ambito
   en CSS: si otro mockup definiera un `mk-traza` distinto, el ultimo cargado
   ganaria y romperia este en silencio.

   Esta escena es DISTINTA a dividir y agrupar: aqui no se selecciona nada.
   Se escribe una regla una vez y luego los pedidos que entran se asignan
   solos. Por eso el raton solo aparece al principio, para escribir la regla,
   y despues se retira: lo que hay que ver es que la cosa trabaja sola.

   Y nada de `transform` en animaciones largas: un transform activo mantiene
   al elemento en una capa compuesta y su texto se rasteriza borroso.

      0-22%   Se escribe la condicion: peso, zona, transportista
     22-32%   Se guarda la regla
     32-45%   Entra el primer pedido y la regla lo evalua
     45-62%   Se le asigna su transportista solo
     62-97%   Entran otros dos y pasa lo mismo, mas rapido
     97-99%   Todo se apaga A LA VEZ y vuelve a empezar
   ========================================================================== */

/* ------------------------------------------------------------- Las reglas */

@keyframes rg-origen-vive {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  97%  { opacity: 1; }
  99%, 100% { opacity: 0; }
}

/* Las tres reglas se presentan escalonadas, una detras de otra: asi se lee
   que hay un orden y que se evaluan de arriba abajo. Sin raton no hay que
   esperar a que una mano llegue, y la escena empieza mucho antes. */
@keyframes rg-regla-1 { 0%, 1% { opacity: 0; } 4%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes rg-regla-2 { 0%, 3% { opacity: 0; } 6%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes rg-regla-3 { 0%, 5% { opacity: 0; } 8%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* La marca «3 activas», cuando ya estan las tres */
@keyframes rg-marca-sale {
  0%, 9%  { opacity: 0; }
  12%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}

/* Cada regla se enciende cuando un pedido cae en ella: es lo que conecta la
   condicion con su resultado. */
@keyframes rg-usa-1 {
  0%, 31% { border-color: var(--linea); }
  34%     { border-color: var(--violeta-claro); }
  42%,97% { border-color: var(--linea); }
  99%,100%{ border-color: var(--linea); }
}
@keyframes rg-usa-2 {
  0%, 48% { border-color: var(--linea); }
  51%     { border-color: var(--violeta-claro); }
  59%,97% { border-color: var(--linea); }
  99%,100%{ border-color: var(--linea); }
}
@keyframes rg-usa-3 {
  0%, 65% { border-color: var(--linea); }
  68%     { border-color: var(--violeta-claro); }
  76%,97% { border-color: var(--linea); }
  99%,100%{ border-color: var(--linea); }
}

/* ------------------------------------------------------ Los pedidos que entran
   Cada uno llega, la regla que le toca se enciende y le pone transportista. */

@keyframes rg-fila-entra {
  0%, 24% { opacity: 0; }
  28%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}
@keyframes rg-fila-entra-2 {
  0%, 45% { opacity: 0; }
  49%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}
@keyframes rg-fila-entra-3 {
  0%, 62% { opacity: 0; }
  66%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}

/* El destello al evaluarlos, justo cuando su regla se enciende */
@keyframes rg-evalua-1 {
  0%, 33% { border-color: var(--linea); background: #fff; }
  35%     { border-color: var(--violeta-claro); background: #f4f2ff; }
  40%, 97%{ border-color: var(--verde-borde); background: var(--verde-suave); }
  99%,100%{ border-color: var(--verde-borde); background: var(--verde-suave); }
}
@keyframes rg-evalua-2 {
  0%, 50% { border-color: var(--linea); background: #fff; }
  52%     { border-color: var(--violeta-claro); background: #f4f2ff; }
  57%, 97%{ border-color: var(--verde-borde); background: var(--verde-suave); }
  99%,100%{ border-color: var(--verde-borde); background: var(--verde-suave); }
}
@keyframes rg-evalua-3 {
  0%, 67% { border-color: var(--linea); background: #fff; }
  69%     { border-color: var(--violeta-claro); background: #f4f2ff; }
  74%, 97%{ border-color: var(--verde-borde); background: var(--verde-suave); }
  99%,100%{ border-color: var(--verde-borde); background: var(--verde-suave); }
}

/* El transportista asignado aparece DESPUES de que su regla lo evalue */
@keyframes rg-asigna-1 { 0%, 37% { opacity: 0; } 40%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes rg-asigna-2 { 0%, 54% { opacity: 0; } 57%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes rg-asigna-3 { 0%, 71% { opacity: 0; } 74%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* ------------------------------------------------------------- La flecha */

@keyframes rg-traza {
  0%, 9%   { stroke-dashoffset: var(--largo, 300); opacity: 0; }
  11%      { stroke-dashoffset: var(--largo, 300); opacity: 1; }
  17%      { stroke-dashoffset: 0; opacity: 1; }
  97%      { stroke-dashoffset: 0; opacity: 1; }
  99%,100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes rg-punta-sale {
  0%, 16%  { opacity: 0; transform: scale(.4); }
  19%      { opacity: 1; transform: scale(1); }
  97%      { opacity: 1; transform: scale(1); }
  99%,100% { opacity: 0; transform: scale(1); }
}

/* -------------------------------------------------------- El panel de pedidos */

@keyframes rg-nuevo-sale {
  0%, 17% { opacity: 0; }
  22%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}

/* El contador de pedidos asignados va subiendo */
@keyframes rg-cuenta-1 { 0%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes rg-cuenta-2 { 0%, 39% { opacity: 0; } 40%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes rg-cuenta-3 { 0%, 56% { opacity: 0; } 57%, 73% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes rg-cuenta-4 { 0%, 73% { opacity: 0; } 74%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }




/* ------------------------------------------------------------ Sin movimiento
   Se congela el resultado: la regla activa y sus tres pedidos asignados. */

@media (prefers-reduced-motion: reduce) {
  .rg-seccion .mk-raton,
  .rg-seccion .mk-flechas { display: none !important; }
  .rg-seccion .mk-origen, .rg-seccion .mk-fila, .rg-seccion .mk-boton,
  .rg-seccion .mk-nuevo, .rg-seccion .mk-regla__pieza,
  .rg-seccion .mk-courier__elegido, .rg-seccion .mk-fila__destino {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .rg-seccion .mk-origen { border-color: var(--verde-borde); background: var(--verde-suave); }
  .rg-seccion .mk-fila { border-color: var(--verde-borde); background: var(--verde-suave); }
}

/* ==========================================================================
   Que pieza usa que animacion
   Todo dentro de `.rg-seccion` para no tocar los otros mockups.
   ========================================================================== */

.rg-seccion .mk-origen { animation: rg-origen-vive var(--ciclo) var(--suave) infinite; }

.rg-seccion .mk-regla__item {
  opacity: 0;
  animation-duration: var(--ciclo), var(--ciclo);
  animation-timing-function: var(--tinte), var(--tinte);
  animation-iteration-count: infinite, infinite;
  animation-name: rg-regla-1, rg-usa-1;
}
.rg-seccion .mk-regla__item:nth-child(2) { animation-name: rg-regla-2, rg-usa-2; }
.rg-seccion .mk-regla__item:nth-child(3) { animation-name: rg-regla-3, rg-usa-3; }

.rg-seccion .mk-regla__marca { opacity: 0; animation: rg-marca-sale var(--ciclo) var(--tinte) infinite; }

.rg-seccion .mk-flecha { animation: rg-traza var(--ciclo) var(--suave) infinite; }
.rg-seccion .mk-punta  { animation: rg-punta-sale var(--ciclo) var(--curva) infinite; }

.rg-seccion .mk-nuevo { animation: rg-nuevo-sale var(--ciclo) var(--suave) infinite; }

.rg-seccion .mk-fila {
  opacity: 0;
  animation-name: rg-fila-entra, rg-evalua-1;
  animation-duration: var(--ciclo), var(--ciclo);
  animation-timing-function: var(--suave), var(--tinte);
  animation-iteration-count: infinite, infinite;
}
.rg-seccion .mk-fila:nth-child(2) { animation-name: rg-fila-entra-2, rg-evalua-2; }
.rg-seccion .mk-fila:nth-child(3) { animation-name: rg-fila-entra-3, rg-evalua-3; }

.rg-seccion .mk-fila__destino { opacity: 0; animation: rg-asigna-1 var(--ciclo) var(--tinte) infinite; }
.rg-seccion .mk-fila:nth-child(2) .mk-fila__destino { animation-name: rg-asigna-2; }
.rg-seccion .mk-fila:nth-child(3) .mk-fila__destino { animation-name: rg-asigna-3; }

.rg-seccion .mk-cuenta span { opacity: 0; animation-duration: var(--ciclo); animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
.rg-seccion .mk-cuenta span:nth-child(1) { animation-name: rg-cuenta-1; opacity: 1; }
.rg-seccion .mk-cuenta span:nth-child(2) { animation-name: rg-cuenta-2; }
.rg-seccion .mk-cuenta span:nth-child(3) { animation-name: rg-cuenta-3; }
.rg-seccion .mk-cuenta span:nth-child(4) { animation-name: rg-cuenta-4; }