/* ============================================================
   SOCIOS ECOM — Lo que se hace en segundo plano
   El aviso de «tu vídeo está listo» y la lista de lo que está
   en marcha. Los pinta trabajos.js y la vista de vídeo.
   ============================================================ */

/* ---------- El aviso, abajo a la derecha ---------- */

.avisos-trabajo {
  position: fixed;
  right: var(--se-sp-5);
  bottom: var(--se-sp-5);
  z-index: var(--se-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--se-sp-2);
  width: min(360px, calc(100vw - 2 * var(--se-sp-4)));
  pointer-events: none;
}

.aviso-trabajo {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: var(--se-sp-3);
  padding: var(--se-sp-3) var(--se-sp-3) var(--se-sp-3) var(--se-sp-3);
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-left: 3px solid var(--se-verde);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
  color: var(--se-tinta);
  pointer-events: auto;
  animation: aviso-entra .25s ease-out;
}
.aviso-trabajo.es-error { border-left-color: var(--se-error); }
.aviso-trabajo.es-saliendo { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }

.aviso-trabajo__icono {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
}
.aviso-trabajo.es-error .aviso-trabajo__icono { background: var(--se-error-tint); color: var(--se-error); }
.aviso-trabajo__icono svg { width: 16px; height: 16px; }

.aviso-trabajo__texto { min-width: 0; }
.aviso-trabajo__texto b { display: block; font-size: 13px; }
.aviso-trabajo__texto small { display: block; font-size: 12px; line-height: 1.4; color: var(--se-tinta-2); }

.aviso-trabajo__ir {
  padding: 5px 10px;
  border-radius: var(--se-r-pill);
  background: var(--se-tinta);
  color: var(--se-papel);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.aviso-trabajo__ir:hover { background: var(--se-verde-tinta); }

.aviso-trabajo__cerrar {
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--se-tinta-3);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.aviso-trabajo__cerrar:hover { background: var(--se-papel-hundido); color: var(--se-tinta); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-trabajo, .aviso-trabajo.es-saliendo { animation: none; transition: none; }
}

/* ---------- En marcha, arriba de Mis vídeos ---------- */

.en-marcha {
  margin-bottom: var(--se-sp-5);
  padding: var(--se-sp-3) var(--se-sp-4);
  background: var(--se-papel-calido);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
}
.en-marcha__titulo {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 var(--se-sp-2);
  font-size: var(--se-fs-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-2);
  font-weight: 600;
}
.en-marcha__titulo svg { width: 14px; height: 14px; }

.en-marcha__lista { list-style: none; margin: 0; padding: 0; }
.en-marcha__fila {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: var(--se-sp-3);
  padding: var(--se-sp-2) 0;
}
.en-marcha__fila + .en-marcha__fila { border-top: .8px solid var(--se-linea-suave); }

.en-marcha__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--se-linea-fuerte);
}
.en-marcha__fila.es-rodando .en-marcha__punto {
  background: var(--se-verde);
  animation: crea-late 1.4s ease-in-out infinite;
}

.en-marcha__texto { min-width: 0; }
.en-marcha__texto b {
  display: block;
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.en-marcha__texto small { display: block; font-size: 12px; color: var(--se-tinta-3); }

.en-marcha__cancelar { padding: 4px 10px; font-size: 12px; }

/* El plano que espera turno no late: todavía no está pasando nada. */
.pieza__pintando.es-en-cola { color: var(--se-tinta-2); }
.pieza__pintando.es-en-cola svg { animation: none; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .en-marcha__fila.es-rodando .en-marcha__punto { animation: none; }
}