/* ==========================================================================
   Agrupar pedidos — el guion
   ==========================================================================

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

   Los keyframes llevan prefijo `ag-` 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.

   Regla de oro: cada efecto va DESPUES de su pulsacion. Si el raton llega a
   la casilla en el 19%, la casilla se marca en el 23%. Un efecto que ocurre
   antes de su clic se lee como que la animacion falla.

   Y nada de `transform` en animaciones largas: un transform activo mantiene
   al elemento en una capa compuesta y su texto se rasteriza borroso. La
   entrada y la salida van solo con opacidad.

      0-18%   Tres pedidos de la misma persona, cada uno con su envio
     18-34%   Se marcan los tres
     34-40%   Se pulsa Agrupar
     40-55%   Se traza la llave y nace el pedido agrupado
     55-97%   Un transportista, una etiqueta, un envio
     97-99%   Todo se apaga A LA VEZ y vuelve a empezar
   ========================================================================== */

/* ----------------------------------------------------- El listado de pedidos */

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

/* La tabla ya esta ahi: es un listado de pedidos pendientes, no algo que
   va llegando. Arrancaba vacia y se veia solo la cabecera durante los
   primeros dos segundos y medio. */
@keyframes ag-fila-entra {
  0%, 100% { opacity: 1; }
}

/* Cada fila se tine cuando SU casilla se marca */
@keyframes ag-fila-m1 { 0%, 12% { border-color: var(--linea); background: #fff; } 14%, 100% { border-color: #cdc9f7; background: #f6f5ff; } }
@keyframes ag-fila-m2 { 0%, 17% { border-color: var(--linea); background: #fff; } 19%, 100% { border-color: #cdc9f7; background: #f6f5ff; } }
@keyframes ag-fila-m3 { 0%, 22% { border-color: var(--linea); background: #fff; } 24%, 100% { border-color: #cdc9f7; background: #f6f5ff; } }

/* Las casillas: el efecto va justo despues de su pulsacion */
@keyframes ag-marca-1 { 0%, 12% { border-color: #c7c5d9; background: #fff; scale: 1; } 13% { border-color: var(--violeta); background: var(--violeta); scale: 1.25; } 15%, 100% { border-color: var(--violeta); background: var(--violeta); scale: 1; } }
@keyframes ag-marca-2 { 0%, 17% { border-color: #c7c5d9; background: #fff; scale: 1; } 18% { border-color: var(--violeta); background: var(--violeta); scale: 1.25; } 20%, 100% { border-color: var(--violeta); background: var(--violeta); scale: 1; } }
@keyframes ag-marca-3 { 0%, 22% { border-color: #c7c5d9; background: #fff; scale: 1; } 23% { border-color: var(--violeta); background: var(--violeta); scale: 1.25; } 25%, 100% { border-color: var(--violeta); background: var(--violeta); scale: 1; } }

@keyframes ag-tick-1 { 0%, 12% { opacity: 0; } 13%, 100% { opacity: 1; } }
@keyframes ag-tick-2 { 0%, 17% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes ag-tick-3 { 0%, 22% { opacity: 0; } 23%, 100% { opacity: 1; } }

/* El boton Agrupar aparece al marcar el SEGUNDO pedido: con uno solo no hay
   nada que agrupar. Solo opacidad, sin transform. */
@keyframes ag-boton-vive {
  0%, 17%  { opacity: 0; pointer-events: none; }
  20%      { opacity: 1; }
  97%      { opacity: 1; }
  99%,100% { opacity: 0; }
}

/* El destello del clic, en la pulsacion del raton (36-38%) */
@keyframes ag-clic {
  0%, 28% { opacity: 0; transform: scale(.92); }
  29.5%   { opacity: .9; transform: scale(1); }
  33%     { opacity: 0; transform: scale(1.3); }
  100%    { opacity: 0; }
}

/* El aviso de «misma direccion», que es lo que justifica agrupar */
/* El aviso es lo que DISPARA la accion: el sistema detecta la coincidencia
   y por eso los marcas. Sale antes que el raton empiece. */
/* Se despliega: ocupando sitio desde el principio dejaba un hueco blanco
   bajo la cabecera mientras estaba invisible. */
@keyframes ag-aviso-sale {
  0%, 1%  { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
  3%      { opacity: 0; max-height: 40px; margin-bottom: .5rem; padding-top: .45rem; padding-bottom: .45rem; }
  5%      { opacity: 1; max-height: 40px; margin-bottom: .5rem; padding-top: .45rem; padding-bottom: .45rem; }
  97%     { opacity: 1; max-height: 40px; }
  99%,100%{ opacity: 0; max-height: 40px; }
}

/* La marca de destino en cada fila: a que grupo ha ido */
@keyframes ag-destino-sale {
  0%, 39% { opacity: 0; }
  43%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}

/* ------------------------------------------------------ La llave que agrupa
   Tres lineas que convergen en una: al reves que en dividir, donde una se
   abre en dos. El trazo va de las filas al pedido agrupado. */

@keyframes ag-traza {
  0%, 31%  { stroke-dashoffset: var(--largo, 300); opacity: 0; }
  32%      { stroke-dashoffset: var(--largo, 300); opacity: 1; }
  39%      { stroke-dashoffset: 0; opacity: 1; }
  97%      { stroke-dashoffset: 0; opacity: 1; }
  99%,100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes ag-punta-sale {
  0%, 38%  { opacity: 0; transform: scale(.4); }
  41%      { opacity: 1; transform: scale(1); }
  97%      { opacity: 1; transform: scale(1); }
  99%,100% { opacity: 0; transform: scale(1); }
}

/* ------------------------------------------------------- El pedido agrupado */

@keyframes ag-nuevo-sale {
  0%, 39% { opacity: 0; }
  46%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}

/* El recuento se rellena cuando ya estan dentro los tres */
@keyframes ag-cuenta-sale { 0%, 41% { opacity: 0; } 43%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* Los pedidos que contiene el grupo, entrando uno a uno */
@keyframes ag-articulo-sale {
  0%, 43% { opacity: 0; }
  47%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}

/* ------------------------------------------------- El selector de transportista
   Aqui solo hay UNO: es la gracia de agrupar, un envio en vez de tres. */

@keyframes ag-despl-a {
  0%, 56%  { opacity: 0; }
  58%      { opacity: 1; }
  62%      { opacity: 1; }
  64%      { opacity: 0; }
  100%     { opacity: 0; }
}

@keyframes ag-opcion-a { 0%, 60% { background: transparent; } 61.5% { background: #f4f2ff; } 64% { background: transparent; } 100% { background: transparent; } }

@keyframes ag-vacio   { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes ag-elegido { 0%, 62% { opacity: 0; } 63%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

@keyframes ag-courier-lleno {
  0%, 62%  { border-style: dashed; border-color: var(--linea); background: var(--papel); }
  64%, 97% { border-style: solid; border-color: var(--verde-borde); background: var(--verde-suave); }
  99%,100% { border-style: solid; border-color: var(--verde-borde); background: var(--verde-suave); }
}

/* ------------------------------------------------------------- La etiqueta
   Una sola: tres pedidos, un bulto, una etiqueta. */

@keyframes ag-etiq-a {
  0%, 67% { opacity: 0; }
  71%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}

/* ============================================================== EL RATON
   Las paradas las calcula el JS tras medir en pantalla. Cada pulsacion va
   justo ANTES del efecto que provoca. */

@keyframes ag-raton-viaje {
  0%       { opacity: 0; translate: var(--r0x) var(--r0y); animation-timing-function: linear; }
  2%       { opacity: 1; translate: var(--r0x) var(--r0y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* las tres casillas, cada pulsacion justo antes de su marcado */
  10%      { opacity: 1; translate: var(--r2x) var(--r2y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  11%      { opacity: 1; translate: var(--r2x) var(--r2y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  12.5%    { opacity: 1; translate: var(--r2x) var(--r2y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  15%      { opacity: 1; translate: var(--r3x) var(--r3y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  16%      { opacity: 1; translate: var(--r3x) var(--r3y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  17.5%    { opacity: 1; translate: var(--r3x) var(--r3y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  20%      { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  21%      { opacity: 1; translate: var(--r4x) var(--r4y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  22.5%    { opacity: 1; translate: var(--r4x) var(--r4y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* el boton Agrupar */
  27%      { opacity: 1; translate: var(--r6x) var(--r6y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  28.5%    { opacity: 1; translate: var(--r6x) var(--r6y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  30%      { opacity: 1; translate: var(--r6x) var(--r6y); scale: 1; animation-timing-function: linear; }
  34%      { opacity: 0; translate: var(--r6x) var(--r6y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* el transportista del pedido agrupado */
  52%      { opacity: 0; translate: var(--r7x) var(--r7y); animation-timing-function: linear; }
  54%      { opacity: 1; translate: var(--r7x) var(--r7y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  55.5%    { opacity: 1; translate: var(--r7x) var(--r7y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  57%      { opacity: 1; translate: var(--r7x) var(--r7y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  60%      { opacity: 1; translate: var(--r8x) var(--r8y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  61%      { opacity: 1; translate: var(--r8x) var(--r8y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  62.5%    { opacity: 1; translate: var(--r8x) var(--r8y); scale: 1; animation-timing-function: linear; }

  90%      { opacity: 1; translate: var(--r8x) var(--r8y); animation-timing-function: linear; }
  97%      { opacity: 1; translate: var(--r8x) var(--r8y); animation-timing-function: linear; }
  99%,100% { opacity: 0; translate: var(--r8x) var(--r8y); }
}


/* ------------------------------------------------------------ Sin movimiento
   Se congela el resultado: los tres pedidos marcados y su envio unico. */

@media (prefers-reduced-motion: reduce) {
  .ag-seccion .mk-raton,
  .ag-seccion .mk-flechas { display: none !important; }
  .ag-seccion .mk-origen, .ag-seccion .mk-fila, .ag-seccion .mk-casilla,
  .ag-seccion .mk-casilla svg, .ag-seccion .mk-boton, .ag-seccion .mk-nuevo,
  .ag-seccion .mk-courier, .ag-seccion .mk-courier__elegido,
  .ag-seccion .mk-etiqueta, .ag-seccion .mk-fila__destino,
  .ag-seccion .mk-articulo, .ag-seccion .mk-nuevo__que span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ag-seccion .mk-desplegable,
  .ag-seccion .mk-courier__vacio { display: none !important; }
  .ag-seccion .mk-courier__elegido { position: static; }
  .ag-seccion .mk-courier { border-style: solid; border-color: var(--verde-borde); background: var(--verde-suave); }
  .ag-seccion .mk-fila { border-color: #cdc9f7; background: #f6f5ff; }
  .ag-seccion .mk-casilla { border-color: var(--violeta); background: var(--violeta); }
}

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

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

.ag-seccion .mk-fila {
  /* La tabla se ve entera desde el principio: solo se anima el marcado */
  animation-name: ag-fila-m1;
  animation-duration: var(--ciclo);
  animation-timing-function: var(--tinte);
  animation-iteration-count: infinite;
}
.ag-seccion .mk-fila:nth-child(3) { animation-name: ag-fila-m2; }
.ag-seccion .mk-fila:nth-child(5) { animation-name: ag-fila-m3; }
/* Las de otros clientes solo entran: nadie las marca */
.ag-seccion .mk-fila--otra { animation: none !important; }

.ag-seccion .mk-casilla {
  animation-duration: var(--ciclo);
  animation-timing-function: var(--curva);
  animation-iteration-count: infinite;
  animation-name: ag-marca-1;
}
.ag-seccion .mk-casilla svg {
  animation-duration: var(--ciclo);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-name: ag-tick-1;
}
.ag-seccion .mk-fila:nth-child(3) .mk-casilla { animation-name: ag-marca-2; }
.ag-seccion .mk-fila:nth-child(5) .mk-casilla { animation-name: ag-marca-3; }
.ag-seccion .mk-fila:nth-child(3) .mk-casilla svg { animation-name: ag-tick-2; }
.ag-seccion .mk-fila:nth-child(5) .mk-casilla svg { animation-name: ag-tick-3; }
/* La casilla de las otras filas nunca se marca */
.ag-seccion .mk-fila--otra .mk-casilla { animation: none !important; }

.ag-seccion .mk-boton { animation: ag-boton-vive var(--ciclo) var(--tinte) infinite; }
.ag-seccion .mk-boton::after { animation: ag-clic var(--ciclo) var(--suave) infinite; }

.ag-seccion .mk-aviso { opacity: 0; overflow: hidden; animation: ag-aviso-sale var(--ciclo) var(--tinte) infinite; }
.ag-seccion .mk-fila__destino { animation: ag-destino-sale var(--ciclo) var(--curva) infinite; }

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

.ag-seccion .mk-nuevo {
  animation: ag-nuevo-sale var(--ciclo) var(--curva) infinite;
}
.ag-seccion .mk-nuevo__que span { animation: ag-cuenta-sale var(--ciclo) steps(1, end) infinite; }
.ag-seccion .mk-articulo { opacity: 0; animation: ag-articulo-sale var(--ciclo) var(--curva) infinite; }
.ag-seccion .mk-articulo:nth-child(2) { animation-delay: .1s; }
.ag-seccion .mk-articulo:nth-child(3) { animation-delay: .2s; }

.ag-seccion .mk-courier { animation: ag-courier-lleno var(--ciclo) var(--tinte) infinite; }
.ag-seccion .mk-courier__vacio { animation: ag-vacio var(--ciclo) steps(1, end) infinite; }
.ag-seccion .mk-courier__elegido { animation: ag-elegido var(--ciclo) steps(1, end) infinite; }
.ag-seccion .mk-desplegable { animation: ag-despl-a var(--ciclo) var(--suave) infinite; }
.ag-seccion .mk-opcion--elegida { animation: ag-opcion-a var(--ciclo) var(--tinte) infinite; }

.ag-seccion .mk-etiqueta { animation: ag-etiq-a var(--ciclo) var(--curva) infinite; }

.ag-seccion .mk-raton { animation: ag-raton-viaje var(--ciclo) cubic-bezier(.45, .05, .25, 1) infinite; }

/* Las filas entran escalonadas */
.ag-seccion .mk-fila:nth-child(1) { --mk-t: .02s; }
.ag-seccion .mk-fila:nth-child(2) { --mk-t: .08s; }
.ag-seccion .mk-fila:nth-child(3) { --mk-t: .14s; }
.ag-seccion .mk-fila:nth-child(4) { --mk-t: .20s; }
.ag-seccion .mk-fila:nth-child(5) { --mk-t: .26s; }

/* La tabla no se minimiza nunca: en dividir la lista se despliega al pulsar,
   pero aqui es un listado de pedidos pendientes, siempre a la vista. */
.ag-seccion .mk-filas {
  max-height: none !important;
  /* Redondeado: `.45rem` da 7.2px y ese decimal viajaba a cada fila,
     dejando los numeros de pedido a medio pixel. */
  padding: round(down, .45rem, 1px) !important;
  animation: none !important;
}

/* La tabla esta completa desde el primer fotograma: `.mk-fila` arranca en
   `opacity: 0` porque en dividir las filas entran escalonadas, y aqui no. */
.ag-seccion .mk-fila { opacity: 1; }

/* En movil el panel bajo el raton se releva, y su ultima parada quedaba
   medida sobre el panel que ya se ha ido: se veia el cursor flotando solo.
   El keyframe vive en `_base.css`; aqui se conecta, que es donde gana. */
@media (max-width: 900px) {
  .ag-seccion .mk-raton { animation-name: ag-raton-movil !important; }
}